Skip to content Skip to sidebar Skip to footer
Home / Css / Css Shapes / Html

How To Create A Custom Shape - Css

Post a Comment
I would like to create a custom shape like this image : how can I do ? My CSS : #chevron { position: relative; text-align: center; padding: 12px; margin-bottom: 6px; he

Solution 1:

  • Add the background color to the parent div to fill in the gap
  • Place the border-radius on the parent div to create the two rounded corners
  • Move the :before and :after down slightly with top: 20px so they don't peak out the top of the div

Example

Here is a fiddle of the below:

#chevron {
  width: 350px;
  height: 100px;
  background: #337AB7;
  border-radius: 10px10px00;
  position: relative;
}
#chevron:before {
  content: '';
  position: absolute;
  top: 20px;
  left: 0;
  height: 100%;
  width: 51%;
  background: #337AB7;
  -webkit-transform: skew(0deg, 6deg);
  -moz-transform: skew(0deg, 6deg);
  -ms-transform: skew(0deg, 6deg);
  -o-transform: skew(0deg, 6deg);
  transform: skew(0deg, 6deg);
}
#chevron:after {
  content: '';
  position: absolute;
  top: 20px;
  right: 0;
  height: 100%;
  width: 50%;
  background: #337AB7;
  -webkit-transform: skew(0deg, -6deg);
  -moz-transform: skew(0deg, -6deg);
  -ms-transform: skew(0deg, -6deg);
  -o-transform: skew(0deg, -6deg);
  transform: skew(0deg, -6deg);
}
<divid="chevron"></div>

Solution 2:

You could skip the CSS and use svg:

Plunker

HTML:

<svgpreserveAspectRatio="none"width="200px"height="100px"><polygonpoints="0,0 200,0 200,80 100,100 0, 80"style="fill:teal;stroke:rgba(0,0,0,1);stroke-width:0" /></svg>

Note that if you need rounded on corners, svg polygons can be tricky as they do not inherently have an attribute similar to border-radius. You can set stroke-linejoin="round" and then adjusting the stroke width attribute to adjust how much it rounds. This works good for solid shapes where you can set the stroke color the same as the fill, or if you can have a border of a different color.

HTML:

<svgwidth="300"height="200"><polygonpoints="10,10 210,10 210,90 110,110 10, 90"style="fill:teal;stroke:teal;stroke-width:10"stroke-linecap="round"stroke-linejoin="round" /></svg>

Solution 3:

I think that you want to write on this shape

<!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8" /><title>CSS Example</title><styletype="text/css">#chevron{ 
                position: relative;
                text-align: center;
                padding: 12px;
                margin-bottom: 6px;
                height: 40px; 
                width: 200px;
                font-size:40px;
                color:#FFF;
                background:#3794d1;
                border-radius: 5px5px00;
            }
            #chevron:before{ 
                content: ''; 
                position: absolute;
                bottom: -10px; 
                left: 0;
                height: 20px;
                width: 50%;
                background: #3794d1;
                -webkit-transform: skew(0deg, 6deg);
                -moz-transform: skew(0deg, 6deg);
                -ms-transform: skew(0deg, 6deg);
                -o-transform: skew(0deg, 6deg);
                transform: skew(0deg, 6deg);
            }
            #chevron:after{ 
                content: ''; 
                position: absolute;
                bottom: -10px; 
                right: 0;
                height: 20px;
                width: 50%;
                background: #3794d1;
                -webkit-transform: skew(0deg, -6deg);
                -moz-transform: skew(0deg, -6deg);
                -ms-transform: skew(0deg, -6deg);
                -o-transform: skew(0deg, -6deg);
                transform: skew(0deg, -6deg);
            }
        </style></head><body><divid="chevron">Welcome</div></body></html>

Post a Comment for "How To Create A Custom Shape - Css"