如何使用剪辑路径 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>