How to create a rounded Chevron shape

Question

I am trying to create a chevron shape using CSS with a rounded head (top edge instead of a triangle), but could not achieve this. Can anyone help? Demo is here .

CSS

#shape{ width: 100px; height: 100px; background-color: lightblue; -webkit-clip-path: polygon(100% 100%, 0 100%, 0 0, 52% 16%, 100% 0); clip-path: polygon(100% 100%, 0 100%, 0 0, 52% 16%, 100% 0); } 

Answer 1

Rounded chevron, hey? Something like that?

I achieved this using a pseudo-element and a radial gradient.

 .rounded { height: 200px; width: 200px; position: relative; margin: 100px; background: tomato; } .rounded:before { content: ""; position: absolute; top: -20%; height: 20%; width: 100%; left: 0; background: radial-gradient(ellipse at top center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%, tomato 71%, tomato 100%); } 

 <div class="rounded"></div> 

---

An alternative would be to use the value of the high shadow values ​​for the boxes, using the shadow color of the pseudo-element as the color of the main element:

 div{ height:200px; width:200px; position:relative; overflow:hidden; } div:before{ content:""; position:absolute; top:-25%;left:0; height:50%; width:100%; border-radius:50%; box-shadow:0 0 0 999px tomato; } 

 <div></div> 

both of which support gradients and / or images in html and body tags.

Answer 2

This is not the cleanest way, but it is efficient and works using pseudo-elements.

To change the depth of a curve, simply change the height in the :after tag.

 .chevron { position: relative; text-align: center; padding: 12px; margin-bottom: 6px; height: 60px; width: 200px; background: red; } .chevron:after { content: ''; width: 200px; padding: 12px; height: 1px; position: absolute; top: -12px; left: 0; border-radius: 50%; border-color: white; background: white; } 

 <div class="chevron"></div>