如何使用 css 打造眉形

Question

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

这是我的眉毛形状。我用 clip-path 属性试过了。这样我就在眉毛边缘有一个 急转弯 ，我想避免。我认为一定有办法实现这一点。

如果有人能帮助我解决我的问题，我将不胜感激。

谢谢。

.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

使用多个背景的一个近似值：

.eyebrow {
  width: 200px;
  height: 150px;
  display: inline-block;
  margin: 5px;
  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%);
}

/* extra */
.eyes {
  width: 420px;
  height: 130px;
  margin-top: -146px;
  position: relative;
  background: radial-gradient(circle closest-side, #000 24%, transparent 26% 67%, #000 70% 80%, transparent 82%) 0/50% 100%;
}

.mouth {
  width: 55px;
  height: 10px;
  background: #000;
  border-radius: 20px;
  position: relative;
  margin-left: 190px;
  transform: rotate(-14deg);
  margin-top: 18px;
}

<div class="eyebrow" style="transform:scaleX(-1)"></div>
<div class="eyebrow"></div>

<div class="eyes"></div>
<div class="mouth"></div>

要理解拼图，请更改颜色并添加一些边框：

.box {
  width:200px;
  height:150px;
  display:inline-block;
  margin:5px;
  border-top-right-radius:13%;
  border:2px solid blue;
  background:
    radial-gradient(farthest-side at top left,green 98%,red 100%) 100% 19%/29px 16% no-repeat,
    radial-gradient(116% 70% at bottom right,pink 99%,transparent 100%),
    radial-gradient(107% 100% at bottom right,#000 99%,transparent 100%);
}


/* extra */
.eyes {
  width: 420px;
  height: 130px;
  margin-top: -146px;
  position: relative;
  background: radial-gradient(circle closest-side, #000 24%, transparent 26% 67%, #000 70% 80%, transparent 82%) 0/50% 100%;
}

body  {
  background:yellow;
}

<div class="box" style="transform:scaleX(-1)"></div> 
<div class="box"></div>

<div class="eyes"></div>

与 mask 一起获得完全透明：

.eyebrow {
  width:200px;
  height:150px;
  display:inline-block;
  margin:5px;
  border-top-right-radius:13%;
  background: radial-gradient(107% 100% at bottom right,#000 99%,transparent 100%);
  -webkit-mask:
    radial-gradient(farthest-side at top left,transparent 98%,#fff 100%) 100% 19%/29px 16% no-repeat,
    radial-gradient(116% 70% at bottom right,transparent 98%,#fff 100%);
 -webkit-mask-composite: destination-out;
 mask:
    radial-gradient(farthest-side at top left,transparent 98%,#fff 100%) 100% 19%/29px 17% no-repeat,
    radial-gradient(116% 68% at bottom right,transparent 98%,#fff 100%);
 mask-composite: exclude;
    
}

/* extra */
.eyes {
  width: 420px;
  height: 130px;
  margin-top: -146px;
  position: relative;
  background: radial-gradient(circle closest-side, #000 24%, transparent 26% 67%, #000 70% 80%, transparent 82%) 0/50% 100%;
}
.mouth {
  width: 55px;
  height: 10px;
  background: #000;
  border-radius: 20px;
  position: relative;
  margin-left: 190px;
  transform: rotate(-14deg);
  margin-top: 18px;
}

body {
  background:linear-gradient(to right,pink,yellow);
}

<div class="eyebrow" style="transform:scaleX(-1)"></div> 
<div class="eyebrow"></div>

<div class="eyes"></div>
<div class="mouth"></div>

如何使用 css 打造眉形

How to create eyebrow shape with css

html

css

css-shapes