How can I obtain any custom shape using clip-path css propery?

Question

I am trying to obtain the shape using clip-path polygon property and it's not working as expected the shape I want to make is given below

I tried the following code but it is giving the corners not round shape

`
#header {
  width: 100%;
  height: 95vh;
  background: linear-gradient(110deg, #2186eb, #37dce2);
  clip-path: polygon(100% 0, 100% 51%, 65% 88%, 57% 96%, 50% 100%, 43% 96%, 24% 87%, 0 51%, 0 0); 
}
`

Answer 1

You won't be able to have a curvature with polygon. You can consider a mask with radial-gradient for the curvature in addition to the clip-path:

.box {
  height: 95vh;
  background: linear-gradient(110deg, #2186eb, #37dce2);
  clip-path: polygon(0 0,0 30%, 50% 100%, 100% 30%,100% 0);
  -webkit-mask:
    linear-gradient(#fff,#fff) top/100% 70% no-repeat,
    radial-gradient(44% 100% at top,#fff 86%,transparent 86.5%);
}


body {
  margin:0;
  background:pink;
}

<div class="box">

</div>

Anther idea using border-radius and transformation:

.box {
  height: 95vh;
  position:relative;
  overflow:hidden;
}
.box::before {
  content:"";
  position:absolute;
  width:100vmax;
  height:100vmax;
  top:50%;
  left:50%;
  transform:translate(-50%,-100%) rotate(45deg);
  border-bottom-right-radius:100px;
  background: linear-gradient(75deg, #2186eb, #37dce2);
}


body {
  margin:0;
  background:pink;
}

<div class="box">

</div>