简单地这样做怎么样?
div {
border: 10px solid #000;
height: 50px;
width: 50px;
border-radius: 50%;
position: relative;
}
div:after {
height: 0;
width: 0;
display: block;
position: absolute;
right: -12px;
content: " ";
border-bottom: 12px solid #fff;
border-right: 12px solid transparent;
transform: rotate(10deg);
}
说明:我们在这里做的是使用:after伪后将元素绝对定位到圆并使用transform属性旋转三角形.
div {
border: 10px solid #000;
height: 50px;
width: 50px;
border-radius: 50%;
position: relative;
animation: spin 1s infinite linear;
}
div:after {
height: 0;
width: 0;
display: block;
position: absolute;
right: -12px;
content: " ";
border-bottom: 12px solid #fff;
border-right: 12px solid transparent;
transform: rotate(10deg);
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
我的建议:当你更新你的qustion,你说你想要一个透明的排水沟,我建议你使用.png图像并旋转它,而不是写100行CSS并担心跨浏览器的兼容性.或者,当我在评论中共享链接时,您可以使用CSS屏蔽.