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); 
}
`

Gemmell

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>

Verbenaceous

You can probably do it (here is a circle), not sure it's a good idea though, and if alternatives can be used, then they are probably better. – Sheepcote

@Sheepcote yes but requires a lot of calculation. In this case, I would probably use and SVG path as a clip-path. It should be easier to generate and can be responsive with the preserveratio – Verbenaceous

SVG can't do a fixed radius in the center, not sure what OP wanted here, (anyway for them a mask is probably better). However per specs we should have a path() directly in clip-path, too bad Chrome doesn't have it yet... – Sheepcote

Answer 2

SVG solution

For the solution used SVG clipPath was used which is well: supported by browsers

body {
margin:0;
padding:0;
background-image:url(https://i.sstatic.net/Nlhed.jpg);
background-repeat: no-repeat;
background-size:cover;
}
.container {
width:100vw;
height:100vh;
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 758 474" preserveAspectRatio="xMinYMin meet" style="border:0px solid red;" >
<defs> 
<clipPath id="cp">     
   <path   d="m0 0 760.2-1v227c0 0-208.4 132.8-319.3 196.8-11.6 6.7-24.9 10.6-38.2 13.1-10.9 2-22.1 1.9-33.1 1-10.9-0.8-23-3-32.1-6C320.5 425.2-1 223.9-1 223.9Z"/>
</clipPath>
</defs>
<image clip-path="url(#cp)" xlink:href="https://i.sstatic.net/iCkE2.png" width="100%" height="100%" />  
</svg>

• Animation option

The cropped image slides out after clicking, and when clicked again, it goes back

var clip = document.getElementById("svg1"), 
   forward = document.getElementById("forward"),
   back = document.getElementById("back") 
    let flag = true;
 clip.addEventListener('click', function() {
  if (flag == true) {
    forward.beginElement();
    flag = false;
  } else {
    back.beginElement();
    flag = true;
  }
});

body {
margin:0;
padding:0;
background-image:url(https://i.sstatic.net/Nlhed.jpg);
background-repeat: no-repeat;
background-size:cover;
}
.container {
width:100vw;
height:100vh;
}

<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 758 474" preserveAspectRatio="xMinYMin meet" style="border:0px solid red;" >
<defs> 
<clipPath id="cp">     
   <path   transform="translate(0,-380)" d="m0 0 760.2-1v227c0 0-208.4 132.8-319.3 196.8-11.6 6.7-24.9 10.6-38.2 13.1-10.9 2-22.1 1.9-33.1 1-10.9-0.8-23-3-32.1-6C320.5 425.2-1 223.9-1 223.9Z"> 
      <animateTransform id="forward"  attributeName="transform" type="translate" begin="indefinite" dur="3s" values="0 -380;0,0" fill="freeze" />    
        <animateTransform id="back"  attributeName="transform" type="translate" begin="indefinite" dur="3s" values="0,0;0,-380" fill="freeze" />      
   </path>
</clipPath>
</defs>
<image   clip-path="url(#cp)" xlink:href="https://i.sstatic.net/iCkE2.png" width="100%" height="100%" />  

</svg>

Obligatory