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

在 playground 中查看：https://jsfiddle.net/denisstukalov/egv64dk7/16/#&togetherjs=ivslT1OqpI

在 css 中绘制“8”

Draw '8' in css

css

draw

css-shapes