Как создать 3-сегментный пончик / кольцо с CSS?

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>