如何使用CSS创建眉形

Question

我正在尝试创建类似这样的形状。

在我的情况下，这是眉毛的形状。我尝试了clip-path属性。这样，我想避免在眉毛边框上出现sharp turn。我认为必须有一种方法可以实现这一目标。

我希望有人帮助我解决我的问题。

谢谢。

.avatar__eyebrow {
    margin: 100px;
    width: 52px;
    height: 25px;
    background: #000;
    clip-path: polygon(57% 6%, 84% 0, 100% 14%, 97% 36%, 87% 51%, 55% 57%, 28% 72%, 0 100%, 25% 39%, 42% 23%);
  }

<div class="avatar__eyebrow"></div>

Answer 1

使用CSS的近似值

.box {
  width:200px;
  height:150px;
  border-top-right-radius:13%;
  background:
    radial-gradient(farthest-side at top left,transparent 98%,#fff 100%) 100% 19%/29px 16% no-repeat,
    radial-gradient(116% 70% at bottom right,#fff 99%,transparent 100%),
    radial-gradient(107% 100% at bottom right,#000 99%,transparent 100%);
}

<div class="box"></div>