作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试创建一个类似这样的形状。
这是我的眉毛的形状。我尝试使用 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>
最佳答案
使用多个背景的一个近似值:
.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>
关于html - 如何用css创建眉毛形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62192456/
我是一名优秀的程序员,十分优秀!