html - 如何在 CSS 中创建编号标记？

Question

我尝试编写 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 边界定位但根本没有得到正确的点。

请问有人可以帮忙弄这个形状吗？谢谢。

Answer 1

您可以使用 :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>