如何解决如何制作带有白色笔触的圆形梯形?
我正在尝试制作一个带有白色描边的梯形,但似乎无法弄清楚如何正确地做它。
目标:
当前拥有:
.trapezoid {
height: 0;
width: 65px;
border-bottom: 40px solid #31cae8;
border-left: 10px solid transparent;
border-radius: 5px;
position: absolute;
z-index: 100;
border-right: 10px solid transparent;
text-align: center;
color: white
}
.trapezoid2 {
height: 0;
width: 80px;
left: 0;
border-bottom: 50px solid white;
border-left: 12px solid transparent;
border-radius: 5px;
border-right: 12px solid transparent;
text-align: center;
color: white
}
.flex {
display: flex;
align-items: center;
justify-content: center;
}
body {
background:pink;
}
<div class="flex">
<div class="trapezoid"></div>
<div class="trapezoid2"></div>
</div>
解决方法
通过一些转换,您可以做到:
.box {
width: 150px;
height: 100px;
margin: 15px;
position: relative;
}
.box::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: lightblue;
border: 5px solid #fff;
border-radius: 15px;
transform: perspective(200px) rotateX(30deg); /* this will do the trick */
}
/* the arrow shape */
.box::after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: #fff;
clip-path: polygon(0 0,100% 50%,0 100%);
left: 50%;
top: 50%;
transform: translate(-40%,-50%);
}
/**/
body {
background: pink;
}
<div class="box">
</div>
也与下面的偏斜转换类似:
.box {
width: 150px;
height: 80px;
margin: 15px;
position: relative;
}
.box::before,.box::after{
content: "";
position: absolute;
top: 0;
bottom: 0;
width:50%;
background: lightblue;
border: 5px solid #fff;
transform-origin:bottom;
}
.box::before {
border-radius:15px 0 0 15px;
border-right:0;
left:0;
transform:skew(-10deg);
}
.box::after {
border-radius:0 15px 15px 0;
border-left:0;
right:0;
transform:skew(10deg);
}
body {
background: pink;
}
<div class="box">
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。