时间戳

首页 > 解决方案 > 如何在 CSS 中创建编号标记？

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

问题描述

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

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

标签： htmlcss

解决方案

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

推荐阅读