CODEWITHSUNDEEP
htmlcsscss-shapes
knocked loose
knocked loose

Reputation: 3304

How to create a 3-segment donut/ring with CSS?

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

enter image description here

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>

Upvotes: 6

Views: 2211

Answers (1)

Temani Afif
Temani Afif

Reputation: 272806

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>

Upvotes: 6

Related Questions