How to create a Numbering marker in CSS?

Question

I tried to write CSS code style to produce the numbering marker that look like this

But it does not look correctly the right shape of the trailing circle.

Here I've tried with CSS code:

.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>

I have tried adjust :before and :after border positioning but did not get the right point at all.

Could anybody help get this shape please? Thanks.

Answer 1

You can use :before and :after selectors to create an arrow and adjust the position on it.

.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>