代码之家 › 专栏 › 技术社区 › Hema Nandagopal

css中带分隔符的圆

css html

-4

Hema Nandagopal · 技术社区 · 6 年前

有什么方法可以使用 css?我创造了一个圆圈,但分隔部分是我被击中的地方

3 回复 | 直到 6 年前

Paulie_D 6 年前

线性渐变背景

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>

jaydeep patel 6 年前

你应该用这个简单的技巧。

希望能帮上忙。

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

Temani Afif 6 年前

下面是另一个带有渐变的语法:

.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*/
}