I'm trying to split a ring up into 3 segments, each segment would have text on it centered. I can figure out the text part, but out of the ways I've tried to do the ring, I can't seem to get it to split into 3 equal parts.
Ideally, I'd like to do this with borders so I can add arrows to them, I tried to do this by splitting a circle but ran into problems with getting the text to sit where I need it. I'd like to keep this primarily to CSS, but I know the arrows on the segments will probably throw a roadblock.
This is what I am trying to do
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>Here is an idea with some complex background layer and without transparency:
I will first create the main shape without the arrow like below:
.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>Then will add the first arrow on the top:
.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>We do the same for the other arrows but considering pseudo element that we rotate:
.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>And with CSS variable it become more complex but easy to adjust:
.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>来源：https://stackoverflow.com/questions/54335233/how-to-create-a-3-segment-donut-ring-with-css