按扇区划分的圆不考虑溢出：隐藏

Question

我在下面的 .circle 上遇到溢出问题。我需要旋转它，当角度为 90/180/270/360/450 等时，溢出被破坏，部分倾斜 <li> 可见。

我找到了两个解决方法 - #1 稍微改变角度和 #2 稍微改变 width/height，但我想了解问题的根源。为什么会发生这种情况？如何在不使用 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>

Answer 1

好像跟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>

按扇区划分的圆不考虑溢出：隐藏

Circle divided by sectors doesn't respect overflow: hidden

html

css

css-transforms