在css中带分隔线的圆圈

Question

有什么方法可以使用 css来实现？我已经创建了一个圆圈，但分隔线部分是我触碰到的地方

Answer 1

您应该使用这个简单的技巧。

希望获得帮助。

让我知道进一步的澄清。

.circle {
    width: 300px;
    height: 300px;
    background: green;
    border-radius: 50%;
        position: relative;
}
.circle:after {
    content: '';
    position: absolute;
    width: 3px;
    height: 100%;
    background: #fff;
    right: 0;
    left: 0;
    text-align: center;
    margin: 0 auto;
    -webkit-transform: rotate(-66deg);
    -moz-transform: rotate(-66deg);
    -o-transform: rotate(-66deg);
    -ms-transform: rotate(-66deg);
    transform: rotate(-66deg);
}

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

Answer 2

线性渐变背景

div {
  width: 200px;
  height: 200px;
  margin: 1em auto;
  border-radius: 50%;
  background: linear-gradient(45deg, grey, grey 48%, transparent 48%, transparent 52%, grey 52%);
}

<div></div>

Answer 3

这是带有渐变的另一种语法：

.box {
  width: 200px;
  height: 200px;
  margin:auto;
  border-radius: 50%;
  background: 
   linear-gradient(grey, grey) left,
   linear-gradient(grey, grey) right;
  background-size:calc(50% - 3px) 100%; /*change the 3px to adjust distance*/
  background-repeat:no-repeat;
  transform:rotate(-45deg); /*change the deg to adjust rotation*/
}

<div class="box"></div>