使用纯 css3 在圆圈（图标）内勾选/勾选

Question

我正在尝试使用纯 css3 在其中绘制一个带有刻度/复选标记的圆圈

.success-checkmark {
    content: '?';
    position: absolute;
    left:0; top: 2px;
    width: 17px; height: 17px;
    border: 1px solid #aaa;
    background: #f8f8f8;
    border-radius: 50%;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.3)

}

我怎样才能实现我用上面的代码尝试过的？

Answer 1

您content: '?';只能在伪元素上使用，因此请尝试使用以下选择器：

    .success-checkmark:after {
      content: '?';
      position: absolute;
      left:0; top: 2px;
      width: 20px; 
      height: 20px;
      text-align: center;
      border: 1px solid #aaa;
      background: #f8f8f8;
      border-radius: 50%;
      box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
    }

<div class="success-checkmark"></div>

Answer 2

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.circle {
  position: relative;
  background: #00B01D;
  border-radius: 100%;
  height: 120px;
  width: 120px;
}

.checkMark {
  position: absolute;
  transform: rotate(50deg) translate(-50%, -50%);
  left: 27%;
  top: 43%;
  height: 60px;
  width: 25px;
  border-bottom: 5px solid #fff;
  border-right: 5px solid #fff;
}

<div class="wrapper">
  <div class="circle">
    <div class="checkMark"></div>
  </div>
</div>