Heim > Fragen und Antworten > Hauptteil
P粉4603775402023-09-03 09:02:45
您遇到的问题是计算 .wheel div
的宽度和高度的方式不正确。如果高度是圆的半径:--radius: calc(var(--wheel-size) / 2 );
,那么宽度就是 width: calc( 2 * var(--radius ) / 1.732);
,其中 1.732 是 Math.sqrt(3)
。这适用于一个有 6 个部分的轮子,其中三角形(用于剪切路径)是等边三角形。
在您的示例中,宽度等于半径。这是不够的,因为 div 超出了圆形,并且您根据 div 的大小计算了剪切路径。
为了了解发生了什么,请删除 border-radius: 50%;,并向轮子添加一个半透明的未剪切的部分(clip-path: none;)
console.log(Math.sqrt(3))
*{margin:0;padding:0} .wheel_container { position: relative; --wheel-size: 360px; width: var(--wheel-size); height: var(--wheel-size); margin-bottom: 2.4em; } .wheel { display: flex; justify-content: center; position: relative; overflow: hidden; width: var(--wheel-size); height: var(--wheel-size); border-radius: 50%; background-color: aquamarine; --segment-deg: 60deg; } .wheel div { display: flex; justify-content: center; align-items: center; position: absolute; --radius: calc(var(--wheel-size) / 2 ); height: var(--radius); width: calc( 2 * var(--radius ) / 1.732); clip-path: polygon(0 0, 50% 100%, 100% 0); transform-origin: bottom; writing-mode: vertical-rl; } .wheel div > span { font-weight: 500; font-size: 1rem; text-align: center; color: rgba(0, 0, 0, 0.7); } .wheel div:nth-child(1) { background-color: beige; transform: rotate(calc(-1 * var(--segment-deg) / 2)); } .wheel div:nth-child(2) { background-color: blueviolet; transform: rotate(calc(-3 * var(--segment-deg) / 2)); } .wheel div:nth-child(3) { background-color: crimson; transform: rotate(calc(-5 * var(--segment-deg) / 2)); } .wheel div:nth-child(4) { background-color: orange; transform: rotate(calc(-7 * var(--segment-deg) / 2)); } .wheel div:nth-child(5) { background-color: violet; transform: rotate(calc(-9 * var(--segment-deg) / 2)); } .wheel div:nth-child(6) { background-color: yellow; transform: rotate(calc(-11 * var(--segment-deg) / 2)); } ..wheel div {transform:none!important}
<div class='wheel_container'> <div class='wheel'> <div><span>Apple</span></div> <div><span>Durian</span></div> <div><span>Banana</span></div> <div><span>Mango</span></div> <div><span>Strawberry</span></div> <div><span>Jackfruit</span></div> </div> </div>
为了进行 8 个部分的轮子,您将需要一个 --segment-deg:45 和不同的 .wheel div
的宽度。我使用的是 width: calc( 2 * var(--radius ) / 2.414);
,其中 2.414 是 (180 - 45) / 2 的正切值。
let a = 67.5; const rad = Math.PI / 180; console.log((Math.tan( a * rad)))
*{margin:0;padding:0} .wheel_container { position: relative; --wheel-size: 360px; width: var(--wheel-size); height: var(--wheel-size); margin-bottom: 2.4em; } .wheel { display: flex; justify-content: center; position: relative; overflow: hidden; width: var(--wheel-size); height: var(--wheel-size); border-radius: 50%; background-color: aquamarine; --segment-deg: 45deg; } .wheel div { display: flex; justify-content: center; align-items: center; position: absolute; --radius: calc(var(--wheel-size) / 2 ); height: var(--radius); width: calc( 2 * var(--radius ) / 2.414); clip-path: polygon(0 0, 50% 100%, 100% 0); transform-origin: bottom; writing-mode: vertical-rl; } .wheel div > span { font-weight: 500; font-size: 1rem; text-align: center; color: rgba(0, 0, 0, 0.7); } .wheel div:nth-child(1) { background-color: beige; transform: rotate(calc(-1 * var(--segment-deg) / 2)); } .wheel div:nth-child(2) { background-color: blueviolet; transform: rotate(calc(-3 * var(--segment-deg) / 2)); } .wheel div:nth-child(3) { background-color: crimson; transform: rotate(calc(-5 * var(--segment-deg) / 2)); } .wheel div:nth-child(4) { background-color: orange; transform: rotate(calc(-7 * var(--segment-deg) / 2)); } .wheel div:nth-child(5) { background-color: violet; transform: rotate(calc(-9 * var(--segment-deg) / 2)); } .wheel div:nth-child(6) { background-color: yellow; transform: rotate(calc(-11 * var(--segment-deg) / 2)); } .wheel div:nth-child(7) { background-color: red; transform: rotate(calc(-13 * var(--segment-deg) / 2)); } .wheel div:nth-child(8) { background-color: blue; transform: rotate(calc(-15 * var(--segment-deg) / 2)); }
<div class='wheel_container'>
<div class='wheel'>
<div><span>Apple</span></div>
<div><span>Durian</span></div>
<div><span>Banana</span></div>
<div><span>Mango</span></div>
<div><span>Strawberry</span></div>
<div><span>Jackfruit</span></div>
<div><span>red</span></div>
<div><span>blue</Antwort0