How to create a rounded Chevron shape

Question

I'm trying to create a chevron shape using CSS with a rounded head (top edge, instead of a triangle one), but not able to achieve this. Can anyone help? Demo 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

A rounded chevron, hey? Something like this?

I've 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 a high box shadows value instead, using the pseudo element's box shadow color as the main element's color as well:

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 the html and body tags.

Answer 2

This isn't the cleanest of ways but its effective and works using pseudo-elements.

To change the depth of the curve, just change the height within 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>