作者:广东蒗缦m莎 | 来源:互联网 | 2023-05-29 08:45
有没有办法创建一个圆形按钮,如图所示使用CSS(不使用Canvas或SVG)?
编辑:我不是在谈论border-radius,请看图片
1> Weafs.py..:
这可以使用:after
和:before
:伪元素.
div {
position: relative;
margin: 30px;
width: 150px;
height: 100px;
background: #FF5656;
border-radius: 1000px / 200px;
}
div:after, div:before {
position: absolute;
content: '';
width: 10px;
height: 72%;
border-top-left-radius: 200px 1000px;
border-bottom-left-radius: 200px 1000px;
left: -6px;
top: 14%;
background: #FF5656;
}
div:after {
border-radius: 0;
border-top-right-radius: 200px 1000px;
border-bottom-right-radius: 200px 1000px;
left: calc(100% - 4px);
}