Making a outer circle divided in 8 parts in html/css

Question

I wanted make something like this using html/css. I am having a image for the inner circle but I am having a tough time with the outer circle being divided into 8 parts. I have tried this approach below for the the outer circle

.loader {
  border: dashed grey;
  border-width: 25px 25px;
  border-radius: 50%;
  width: 120px;
  height: 120px;
}

<div class="loader"></div>

but this not panning out to what I wanted. Can anyone help me out here with this please.

Does the background need to be transparent? (Aka, will this be displayed over anything other than a solid colour? And do you want the opacity?) If so, I would probably honestly look at using a canvas. If not, it should be possible with 3 circles and some rotated lines. — DBS, May 19 '20 at 08:58

score 1 · Answer 1 · answered May 19 '20 at 09:17

Here's one way you could go about building a shape like this:

We're using 3 concentric circles, each centred on the same point (the middle circle is there to fake the background colour) Then we add 4 lines, which are positioned and rotated to break the outer circle into 8 segments.

.outer {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background-color: #555;
}

.mid {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background-color: #FFF;
}

.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-color: #555;
}

.line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #FFF;
}

.line1 {
  transform: rotate(22.5deg);
}
.line2 {
  transform: rotate(67.5deg);
}
.line3 {
  transform: rotate(112.5deg);
}
.line4 {
  transform: rotate(157.5deg);
}

<div class="outer">
  <div class="line line1"></div>
  <div class="line line2"></div>
  <div class="line line3"></div>
  <div class="line line4"></div>
  <div class="mid">
    <div class="inner"></div>
  </div>
</div>

Obviously this may or many not be suitable depending on what you're aiming to use it for.

score 0 · Answer 2 · answered May 19 '20 at 09:19

You can achieve that effect with linear-gradients. A single gradient can be a 2px line when it's set to transparency from 0% to 50% - 1px, to a color at 50%, and transparency again from 50% + 1px till the end.

Since you want 8 parts you need 4 lines. Each part has to be 360deg / 8 degrees apart from each other, so 45deg.

Also, not the lines, but the tiles themselves are at the 0 / 90 degree mark, so there needs to be an offset of 45deg / 2 -> 22.5deg

As you can stack as many gradients as you want in a background, one element is enough to draw the eight lines, each 45deg apart from each other with an offset of 22.5deg

.loader-outer {
width: 300px;
height: 300px;
background: linear-gradient(
    22.5deg,
    transparent calc(50% - 1px),
    #fff 50%,
    transparent calc(50% + 1px)
  ),
  linear-gradient(
    -22.5deg,
    transparent calc(50% - 1px),
    #fff 50%,
    transparent calc(50% + 1px)
  ),
  linear-gradient(
    112.5deg,
    transparent calc(50% - 1px),
    #fff 50%,
    transparent calc(50% + 1px)
  ),
  linear-gradient(
    68.5deg,
    transparent calc(50% - 1px),
    #fff 50%,
    transparent calc(50% + 1px)
  );
  
  background-color: gray;
  border-radius: 50%;
}

<div class="loader-outer"></div>

You said you don't need transparency, so you can just take the inner part of your visualization and draw it over that circle with the lines.

hey @ThomasAltman thanks for answering first. But I do need to change the color of each partition of this circle programatically, if possible, can you please give any pointers on that? — abhishek ranjan, May 19 '20 at 10:00
Sure, instead of using transparency, you can use the colors you want. I'll update my answer - update: unfortunately not that simple. You could always just use SVGs, I wanted a html/css-only approach but coloring in isn't working as I thought there — Thomas Altmann, May 19 '20 at 12:03

Making a outer circle divided in 8 parts in html/css

2 Answers2