Круг, разделенный на сектора, не учитывает переполнение: скрыто - PullRequest
Новая
       76

Круг, разделенный на сектора, не учитывает переполнение: скрыто

1 голос
/ 03 мая 2020

У меня проблема с переполнением на .circle ниже. Мне нужно повернуть его, и когда угол равен 90/180/270/360/450 и т. Д. c, переполнение нарушено, и некоторая часть перекоса <li> видна.

enter image description here

Я нашел два обходных пути - # 1 немного изменить угол и # 2 немного изменить ширину / высоту, но я хочу понять происхождение вопрос. Почему это происходит и как мне исправить это без 0.02px/0.01deg хаков? 

body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 10px;
}

.circle {
  background-color: #444;
  border-radius: 50%;
  height: 150px;
  overflow: hidden;
  transform: rotate(90deg);
  width: 150px;
  display: inline-block;
  --accent: salmon;
}

li {
  background: var(--accent);
  border: 1px solid #444;
  box-sizing: border-box;
  height: 50%;
  list-style-type: none;
  position: absolute;
  right: 0px;
  top: 0px;
  transform-origin: 0px 100%;
  user-select: none;
  width: 50%
}

li:nth-child(1) {
  transform: rotate(0deg) skewY(-60deg) translate3d(0, 0, 0)
}

li:nth-child(2) {
  transform: rotate(30deg) skewY(-60deg) translate3d(0, 0, 0)
}

li:nth-child(3) {
  transform: rotate(60deg) skewY(-60deg) translate3d(0, 0, 0)
}

li:nth-child(4) {
  transform: rotate(90deg) skewY(-60deg) translate3d(0, 0, 0)
}

li:nth-child(5) {
  transform: rotate(120deg) skewY(-60deg) translate3d(0, 0, 0)
}

li:nth-child(6) {
  transform: rotate(150deg) skewY(-60deg) translate3d(0, 0, 0)
}

li:nth-child(7) {
  transform: rotate(180deg) skewY(-60deg) translate3d(0, 0, 0)
}

li:nth-child(8) {
  transform: rotate(210deg) skewY(-60deg) translate3d(0, 0, 0)
}

li:nth-child(9) {
  transform: rotate(240deg) skewY(-60deg) translate3d(0, 0, 0)
}

li:nth-child(10) {
  transform: rotate(270deg) skewY(-60deg) translate3d(0, 0, 0)
}

li:nth-child(11) {
  transform: rotate(300deg) skewY(-60deg) translate3d(0, 0, 0)
}

li:nth-child(12) {
  transform: rotate(330deg) skewY(-60deg) translate3d(0, 0, 0)
}
<div class="circle">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</div>

<div class="circle" style="transform: rotate(90.01deg); --accent: lightseagreen;">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</div>

<div class="circle" style="width: 150.02px; --accent: lightseagreen;">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</div>

<p>
  original
</p>
<p>
  transform: rotate(90.01deg)
</p>
<p>
  not square - 150.02px x 150px
</p>

1 Ответ

1 голос
/ 03 мая 2020

Похоже, это связано с использованием 3D-преобразования. Я не знаю точно, почему, но работает нормально, если удалить (тоже не нужно) 

body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 10px;
}

.circle {
  background-color: #444;
  border-radius: 50%;
  height: 150px;
  overflow: hidden;
  transform: rotate(90deg);
  width: 150px;
  display: inline-block;
  --accent: salmon;
}

li {
  background: var(--accent);
  border: 1px solid #444;
  box-sizing: border-box;
  height: 50%;
  list-style-type: none;
  position: absolute;
  right: 0px;
  top: 0px;
  transform-origin: 0px 100%;
  user-select: none;
  width: 50%
}

li:nth-child(1) {
  transform: rotate(0deg) skewY(-60deg) 
}

li:nth-child(2) {
  transform: rotate(30deg) skewY(-60deg) 
}

li:nth-child(3) {
  transform: rotate(60deg) skewY(-60deg) 
}

li:nth-child(4) {
  transform: rotate(90deg) skewY(-60deg) 
}

li:nth-child(5) {
  transform: rotate(120deg) skewY(-60deg) 
}

li:nth-child(6) {
  transform: rotate(150deg) skewY(-60deg) 
}

li:nth-child(7) {
  transform: rotate(180deg) skewY(-60deg) 
}

li:nth-child(8) {
  transform: rotate(210deg) skewY(-60deg) 
}

li:nth-child(9) {
  transform: rotate(240deg) skewY(-60deg) 
}

li:nth-child(10) {
  transform: rotate(270deg) skewY(-60deg) 
}

li:nth-child(11) {
  transform: rotate(300deg) skewY(-60deg) 
}

li:nth-child(12) {
  transform: rotate(330deg) skewY(-60deg) 
}
<div class="circle">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</div>
...