Question

我正在尝试创建一个有8个段，大小为45度的彩虹圈。

您会注意到橙色部分的尺寸是其他部分的两倍。我认为这些是1号和8号。但我不知道如何将它们分开。我的学位是错的吗？

感谢您的帮助。

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>

Answer 1

哦，那显而易见......你正在使用方形元素（li）并以不同的角度旋转它以制作它...

根据您的设计，每个li div将为90 Degree，而每个45 degree将被其他元素隐藏，

对于切片7的每个元素都可以正常工作但是切片8的角度= 90.将覆盖黄色元素。

以你的小提琴为例..你会注意到只有你的橙色元素（切片8）是90度，除了黄色（切片1）隐藏在你的切片8中之外其余的都很好。

要解决这个问题，你应该减少弧线以使其适合..

对以下内容进行更改..你的馅饼将会去

.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); 
}

见下面的演示 Working Fiddle

HTML CSS圈切片不相等

1 个答案: