HTML CSS circle slices aren't equal

Question

I'm trying to create a rainbow circle with 8 segments, 45 degrees in size.

You'll notice that the orange segment is double the size of the others. I think these are number 1 and 8. I can't however figure out how to separate them. Are my degree wrong?

Thanks for your help.

body {
  overflow: hidden;
}
.pie {
  position: relative;
  margin: 1em auto;
  border: dashed 1px;
  padding: 0;
  width: 32em;
  height: 32em;
  border-radius: 50%;
  list-style: none;
}
.slice1 {
  overflow: hidden;
  /**/
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  transform-origin: 0% 100%;
  transform: rotate(-22.5deg) skewY(0deg);
}
.slice2 {
  overflow: hidden;
  /**/
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  transform-origin: 0% 100%;
  transform: rotate(22.5deg) skewY(0deg);
}
.slice3 {
  overflow: hidden;
  /**/
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  transform-origin: 0% 100%;
  transform: rotate(67.5deg) skewY(0deg);
}
.slice4 {
  overflow: hidden;
  /**/
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  transform-origin: 0% 100%;
  transform: rotate(112.5deg) skewY(0deg);
}
.slice5 {
  overflow: hidden;
  /**/
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  transform-origin: 0% 100%;
  transform: rotate(157.5deg) skewY(0deg);
}
.slice6 {
  overflow: hidden;
  /**/
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  transform-origin: 0% 100%;
  transform: rotate(202.5deg) skewY(0deg);
}
.slice7 {
  overflow: hidden;
  /**/
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  transform-origin: 0% 100%;
  transform: rotate(247.5deg) skewY(0deg);
}
.slice8 {
  overflow: hidden;
  /**/
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  transform-origin: 0% 100%;
  transform: rotate(-67.5deg) skewY(0deg);
}
.slice-contents1 {
  position: absolute;
  left: -100%;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  background: #ffff4d;
  text-align: center;
  transition: background-color .5s;
}
.slice-contents2 {
  position: absolute;
  left: -100%;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  background: #9AC147;
  text-align: center;
  transition: background-color .5s;
}
.slice-contents3 {
  position: absolute;
  left: -100%;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  background: #639b47;
  text-align: center;
  transition: background-color .5s;
}
.slice-contents4 {
  position: absolute;
  left: -100%;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  background: #3869c3;
  text-align: center;
  transition: background-color .5s;
}
.slice-contents5 {
  position: absolute;
  left: -100%;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  background: #1e3868;
  text-align: center;
  transition: background-color .5s;
}
.slice-contents6 {
  position: absolute;
  left: -100%;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  background: #c682bb;
  text-align: center;
  transition: background-color .5s;
}
.slice-contents7 {
  position: absolute;
  left: -100%;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  background: #9a1d34;
  text-align: center;
  transition: background-color .5s;
}
.slice-contents8 {
  position: absolute;
  left: -100%;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  background: #f7941e;
  text-align: center;
  transition: background-color .5s;
}
.slice1 .slice2 .slice3 .slice4 .slice5 .slice6 .slice7 .slice8 .slice-contents1 .slice-contents2 .slice-contents3 .slice-contents4 .slice-contents5 .slice-contents6 .slice-contents7 .slice-contents8 {
  transform: skewY(40deg) rotate(25deg);
}
.slice-contents1:hover {
  background: #ffff1a;
}
.slice-contents2:hover {
  background: #8db23c;
}
.slice-contents3:hover {
  background: #588a3f;
}
.slice-contents4:hover {
  background: #2d549b;
}
.slice-contents5:hover {
  background: #132340;
}
.slice-contents6:hover {
  background: #ad4f9e;
}
.slice-contents7:hover {
  background: #85192d;
}
.slice-contents8:hover {
  background: #f38809;
}

<html>

<body>


  <ul class='pie'>
    <li class='slice1'>
      <div class='slice-contents1'>#</div>
    </li>
    <li class='slice2'>
      <div class='slice-contents2'>#</div>
    </li>
    <li class='slice3'>
      <div class='slice-contents3'>#</div>
    </li>
    <li class='slice4'>
      <div class='slice-contents4'>#</div>
    </li>
    <li class='slice5'>
      <div class='slice-contents5'>#</div>
    </li>
    <li class='slice6'>
      <div class='slice-contents6'>#</div>
    </li>
    <li class='slice7'>
      <div class='slice-contents7'>#</div>
    </li>
    <li class='slice8'>
      <div class='slice-contents8'>#</div>
    </li>


    <ul>


</body>

</html>

@TIMINeutron im using chrome and the orange segment is 90degrees — , Sep 29 '14 at 13:59
All your slices are 90degrees but are overlapping the others. The orange one seems to be on top. — TheFrozenOne, Sep 29 '14 at 14:03
[Are you after something like this](http://jsfiddle.net/tzh4Lp3L/)? Just change the percentages to match your needs (and you may want to add a white arc as circle 9 in the middle) — Pete, Sep 29 '14 at 14:10
@Pete i'm not sure what's happened but the shapes are everywhere :P i just want the yellow segment to appear. is it anything to do with my z-index? — , Sep 29 '14 at 14:22
@Doodlebunch does this mean there'll always be one slice overlapping? — , Sep 29 '14 at 14:24
Ah right, you did say you were trying to create a rainbow circle — Pete, Sep 29 '14 at 14:38
@Pete sorry, I can understand why I've been getting so many rainbows now.. :P — , Sep 29 '14 at 14:45
There's an interesting answer there : http://stackoverflow.com/questions/21205652/how-to-draw-a-circle-sector-in-css — nicolas, Sep 29 '14 at 15:09
Ah, the problem was that you needed a 45% segment as your last segment so it wouldn't overlap the first segment - [try this](http://jsfiddle.net/tzh4Lp3L/6/) — Pete, Sep 29 '14 at 15:15
@Pete but, any particular reason why red and orange share the same hover now? — , Sep 29 '14 at 15:24
I think it's because the segments are still quarters - if you inspect the elements it will show you the overlaps — Pete, Sep 29 '14 at 15:26
This version is a bit better but it has no transition on the hover and the hover on the orange is blocked by the yellow - http://jsfiddle.net/tzh4Lp3L/11/, your best bet may be to do a canvas or svg pie chart — Pete, Sep 29 '14 at 15:32

score 0 · Accepted Answer · answered Sep 29 '14 at 15:55

0

Ohh thats obvious ... you are using square element(li) and rotating it in different angles to make that pi..

According to your design each li div will be of 90 Degree ,while 45 degree of every will be hidden by other element,

for every element upto slices 7 will work good but slice 8 of angle=90.will cover yellow colored element.

take your fiddle for example ..you will notice only yours orange element(slice 8) is of 90 degree and rest are good except yellow(slice 1 ) that was hidden inside your slice 8.

to solve it you should reduce your arc to make it fit..

Make changes to following ..your pie will be go to go

.slice-contents8 {
position: absolute;
left: -100%;
width: 200%; height: 200%;
border-radius: 50%;

text-align: center;
transition: background-color .5s;
background-image: linear-gradient(135deg, transparent 50%, #f7941e 50%), linear-gradient(90deg, white 50%, transparent 50%);
}

.slice8 {
overflow: hidden; /**/
position: absolute;
top: 0; right: 0;
width: 50%; height: 50%;
transform-origin: 0% 100%; 
transform: rotate(-112.5deg); 
}

see the below demo Working Fiddle

answered Sep 29 '14 at 15:55

Shekhar Pankaj

9,065
3
28
46

having same issue as above with the hovers not working – Sep 30 '14 at 08:38
also, when i change the # on the html to a label, they've all moved to be covered by the following slice – Sep 30 '14 at 11:40
changing it to label will create many new issues , what exactly you need to do, because if you are going to create pie chart its not the way to put label inside the arc...or you can create separate legends – Shekhar Pankaj Sep 30 '14 at 11:56
because we was,fixing your need, and i was creating pie chart label in it i wll go for some other approach – Shekhar Pankaj Sep 30 '14 at 11:59
i'll find another way for labelling :) still trying to get the red slice to highlight – Sep 30 '14 at 12:30
any ideas about hovers on the red slice? – Oct 02 '14 at 08:57

HTML CSS circle slices aren't equal

1 Answers1