圆形半边框CSS

Question

我正在尝试使用CSS创建一个圆圈,它看起来与下图完全相同:

如何用CSS制作这个？

Answer 1

我能想到的最简单的方法是使用border-radius灰色div来制作圆圈并将黑色边框应用于两个相邻的边.然后,您可以简单地旋转元素,使边框位于顶部.

div.circleThing {
    width:100px; height:100px;
    background:#666;
    border:10px solid black;
    border-radius:50%;
    border-bottom-color:#fff;
    border-right-color:#fff;
    transform: rotate(45deg);
}

<div class="circleThing"></div>