How to create a custom shape - css

Question

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;
  height: 60px; 
  width: 200px; }

#chevron:before { 
  content: ''; 
  position: absolute;
  top: 0; 
  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: 0; 
  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); }

My HTML file :

<div id="chevron">

</div>

But my result isn't what I want :

Answer 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: 10px 10px 0 0;
  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);
}

<div id="chevron"></div>

Answer 2

You could skip the CSS and use svg:

Plunker

HTML:

<svg preserveAspectRatio="none" width="200px" height="100px">

  <polygon points="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:

<svg width="300" height="200">

  <polygon points="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>