如何使用剪切路径CSS属性获得任何自定义形状？

Question

我正在尝试使用剪切路径多边形属性来获取形状，但无法按预期方式工作，下方给出了我想要的形状

我尝试了以下代码，但它给出的拐角不是圆形

`
#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

您将无法使多边形具有曲率。除了剪切路径之外，您还可以考虑使用曲率径向渐变的蒙版：

.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>

使用边界半径和变换的另一种想法：

.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>

Answer 2

SVG 解决方案

对于所用的解决方案，使用了 SVG clipPath，这很好：supported by browsers

body {
margin:0;
padding:0;
background-image:url(https://i.stack.imgur.com/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.stack.imgur.com/iCkE2.png" width="100%" height="100%" />  
</svg>

• 动画选项

裁剪后的图片点击后滑出，再次点击又返回

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.stack.imgur.com/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.stack.imgur.com/iCkE2.png" width="100%" height="100%" />  

</svg>