这篇博客分享了一种利用CSS技巧创建圆形带有箭头的图形的方法，通过结合使用border-radius、box-shadow和伪元素来达成。代码示例详细展示了如何创建一个150px的白色圆形，并在其内部添加一个红色箭头。
.circle {
width: 150px;
height: 150px;
background: white;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 75px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 3px 1px 3px #909090;
border: solid 1px #909090;
position: relative;
}
.arrow {
width: 125px;
height: 0;
border-left: 125px solid red;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
position: absolute;
left: 21px;
}
.arrow:after {
content: '';
border-left: 36px solid white;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
position: absolute;
top: -50px;
left: -125px;
}
用笨办法实现了, 自问自答吧....
扫一扫
708
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
