如何使用 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>