在CSS中绘制'8'

Question

.seven_number {
    position: absolute;
    right: 147px;
    top: 25px;
    width: 14px;
}

.seven_number:after {
    content: "";
    height: 5px;
    width: 20px;
    position: absolute;
    background: #c6c6c6;
    top: 0px;
    left: -2px;
}

.seven_number:before {
    content: "";
    height: 27px;
    width: 5px;
    position: absolute;
    background: #c6c6c6;
    top: 0px;
    right: 0px;
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);

<div class="seven_number"></div>

此代码是用css像这样绘制[7] https://i.stack.imgur.com/QVBXi.png

有人可以帮我画一个像这样的8吗？

Answer 1

您可以使用此样式作为示例：

.eight_number {
    position: absolute;
    right: 187px;
    top: 25px;
    width: 14px;
}

.eight_number:after {
    content: "";
    height: 6px;
    width: 6px;
    position: absolute;
    top: 0px;
    border-radius: 50%;
    background-color:#fff;
    border:4px solid #c6c6c6; 
}
.eight_number:before {
    content: "";
    height: 10px;
    width: 10px;
    position: absolute;
    top: 10px;
    left:-2px;
    border-radius: 50%;
    background-color:#fff;
    border:4px solid #c6c6c6; 
}

<div class="eight_number"></div>

在操场上观看：https://jsfiddle.net/denisstukalov/egv64dk7/16/#&togetherjs=ivslT1OqpI