我尝试编写 CSS 代码样式来生成如下所示的编号标记
但尾部圆圈的形状看起来不正确。
我在这里尝试使用 CSS 代码:
.comment-icon {
width: 30px;
height: 30px;
border-radius: 100%;
border: 2.45px solid #e7ad56;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
.comment-icon:before {
position: absolute;
content: "";
width: 15px;
height: 16px;
border-top: 2.45px solid #e7ad56;
top: 20px;
left: -6px;
transform: rotate(286deg);
}
.comment-icon:after {
position: absolute;
content: "";
width: 15px;
height: 16px;
border-bottom: 2.45px solid #e7ad56;
top: 16px;
left: -13px;
transform: rotate(325deg);
}<div class="comment-icon">1</div>我已经尝试调整 :before 和 :after 边界定位但根本没有得到正确的点。
请问有人可以帮忙弄这个形状吗？谢谢。
最佳答案
您可以使用 :before 和 :after 选择器来创建箭头并调整其位置。
.comment-icon {
width: 30px;
height: 30px;
border-radius: 100%;
border: 2.45px solid #e7ad56;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
.comment-icon:before {
position: absolute;
content: "";
top: 24px;
left: -9px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 15px solid #e7ad56;
transform: rotate(50deg);
}
.comment-icon:after {
position: absolute;
content: "";
top: 24px;
left: -5px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 12px solid #fff;
transform: rotate(50deg);
}<div class="comment-icon">1</div>https://stackoverflow.com/questions/68175619/