如何使用CSS创建3段式甜甜圈/戒指？

Question

我正在尝试将戒指分成3个部分，每个部分的文本都居中。我可以弄清楚文字部分，但是从尝试制作铃声的方式来看，我似乎无法将它分成3个相等的部分。

理想情况下，我想使用边框进行操作，以便可以向其中添加箭头，我试图通过拆分圆来实现此目的，但是遇到了使文本位于我需要的位置的问题。我想主要将其保留在CSS上，但我知道这些细分市场上的箭头可能会给我们带来障碍。

这就是我想要做的

https://jsfiddle.net/wrqpas09/

.segment {
  position: absolute;
  border: 20px solid #000;
  display: inline-block;
  min-width: 200px;
  min-height: 200px;
  border-radius: 50%;
  top: 0;
  left: 0;
  border-color: transparent;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.s1 {
  border-top-color: green;
  left: 2px
}

.s2 {
  border-right-color: red;
  top: 2px;
  left: 2px
}

.s3 {
  border-bottom-color: blue;
  top: 2px;
}

.s4 {
  border-left-color: #000;
}

<div class="segment s1"></div>
<div class="segment s2"></div>
<div class="segment s3"></div>
<div class="segment s4"></div>

Answer 1

这是一个具有一些复杂背景层且不透明的想法：

我将首先创建没有箭头的主要形状，如下所示：

.box {
  width:200px;
  height:200px;
  border-radius:50%;
  padding:50px;
  background:
    linear-gradient(#fff,#fff) content-box,
    linear-gradient(-35deg,green 59%, transparent 60%) bottom left/50% 50%,
    linear-gradient( 35deg,green 59%, transparent 60%) bottom right/50% 50%,
    linear-gradient(to right,red 50%,blue 0);
  background-repeat:no-repeat;
  box-sizing:border-box;
}

<div class="box">

</div>

然后将第一个箭头添加到顶部：

.box {
  width:200px;
  height:200px;
  border-radius:50%;
  padding:50px;
  background:
    linear-gradient(#fff,#fff) content-box,
    linear-gradient(to top right, 
        red calc(50% - 6px),#fff calc(50% - 5px),
        #fff 50%,transparent 51%) calc(50% + 10px) -10px/20px 35px,
    linear-gradient(to bottom right, 
        red calc(50% - 6px),#fff calc(50% - 5px),
        #fff 50%,transparent 51%) calc(50% + 10px) 25px/20px 35px,
     
    
    linear-gradient(-35deg,green 59%, transparent 60%) bottom left/50% 50%,
    linear-gradient( 35deg,green 59%, transparent 60%) bottom right/50% 50%,
    linear-gradient(to right,red 50%,blue 0);
  background-repeat:no-repeat;
  box-sizing:border-box;
}

<div class="box">

</div>

我们对其他箭头也做同样的事情，但是考虑到旋转的伪元素：

.box {
  width:200px;
  height:200px;
  border-radius:50%;
  padding:50px;
  background:
     /*first arrow*/
    linear-gradient(to top right, 
        red calc(50% - 6px),#fff calc(50% - 5px),
        #fff 50%,transparent 51%) calc(50% + 10px) -10px/20px 35px,
    linear-gradient(to bottom right, 
        red calc(50% - 6px),#fff calc(50% - 5px),
        #fff 50%,transparent 51%) calc(50% + 10px) 25px/20px 35px,
    /*main background*/
    
    linear-gradient(-35deg,green 59%, transparent 60%) bottom left/50% 50%,
    linear-gradient( 35deg,green 59%, transparent 60%) bottom right/50% 50%,
    linear-gradient(to right,red 50%,blue 0);
  background-repeat:no-repeat;
  box-sizing:border-box;
  position:relative;
}
.box::before,
.box::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-radius:50%;
  padding:50px;
  background:
    linear-gradient(#fff,#fff) content-box,
    linear-gradient(to top right, 
        var(--c) calc(50% - 6px),#fff calc(50% - 5px),
        #fff 50%,transparent 51%) calc(50% + 10px) -10px/20px 35px,
    linear-gradient(to bottom right, 
        var(--c) calc(50% - 6px),#fff calc(50% - 5px),
        #fff 50%,transparent 51%) calc(50% + 10px) 25px/20px 35px;
   background-repeat:no-repeat; 
}
.box::before {
  --c:green;
  transform:rotate(-125deg);
}
.box::after {
  --c:blue;
  transform:rotate(124deg);
}

<div class="box">

</div>

有了CSS变量，它变得更加复杂，但易于调整：

.box {
  /*coloration*/
  --c1:red;
  --c2:green;
  --c3:blue;
  --m:#fff; /*main background*/
  /**/
  --d:50px; /*the height of the borders*/
  --s:5px; /*the white distance*/


  width:200px;
  height:200px;
  border-radius:50%;
  padding:var(--d);
  background:
     /*first arrow*/
    linear-gradient(to top right, 
        var(--c1) calc(50% - var(--s) - 1px),var(--m) calc(50% - var(--s)),
        var(--m) 50%,transparent 51%) calc(50% + 10px) calc(-2*var(--s))/20px calc(var(--d)/2 + 2*var(--s)),
    linear-gradient(to bottom right, 
        var(--c1) calc(50% - var(--s) - 1px),var(--m) calc(50% - var(--s)),
        var(--m) 50%,transparent 51%) calc(50% + 10px) calc(var(--d)/2)/20px calc(var(--d)/2 + 2*var(--s)),
    /*main background*/
    
    linear-gradient(-35deg,var(--c2) 59%, transparent 60%) bottom left/50% 50%,
    linear-gradient( 35deg,var(--c2) 59%, transparent 60%) bottom right/50% 50%,
    linear-gradient(to right,var(--c1) 50%,var(--c3) 0),
    var(--m);
  background-repeat:no-repeat;
  box-sizing:border-box;
  position:relative;
  overflow:hidden;
  display:inline-block;
}
.box::before,
.box::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-radius:50%;
  padding:var(--d);
  background:
    linear-gradient(var(--m),var(--m)) content-box,
    linear-gradient(to top right, 
        var(--c) calc(50% - var(--s) - 1px),var(--m) calc(50% - var(--s)),
        var(--m) 50%,transparent 51%) calc(50% + 10px) calc(-2*var(--s))/20px calc(var(--d)/2 + 2*var(--s)),
    linear-gradient(to bottom right, 
        var(--c) calc(50% - var(--s) - 1px),var(--m) calc(50% - var(--s)),
        var(--m) 50%,transparent 51%) calc(50% + 10px) calc(var(--d)/2)/20px calc(var(--d)/2 + 2*var(--s));
   background-repeat:no-repeat; 
}
.box::before {
  --c:var(--c2);
  transform:rotate(-125deg);
}
.box::after {
  --c:var(--c3);
  transform:rotate(124deg);
}

<div class="box">
</div>
<div class="box" style="--c1:orange;--c3:purple;--d:60px;--s:2px">
</div>

<div class="box" style="--c2:black;--d:20px;--s:10px;--m:grey">
</div>