P粉4603775402023-09-03 09:02:45
The problem you are having is that the width and height of the .wheel div
are calculated incorrectly. If the height is the radius of the circle: --radius: calc(var(--wheel-size) / 2 );
, then the width is width: calc( 2 * var(--radius ) / 1.732);
, where 1.732 is Math.sqrt(3)
. This works for a wheel with 6 parts, where the triangle (for the clipping path) is an equilateral triangle.
In your example, the width is equal to the radius. This is not enough because the div exceeds the circle and you calculated the clipping path based on the size of the div.
To understand what's going on, remove border-radius: 50%; and add a semi-transparent unclipped portion to the wheel (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>
In order to do an 8-segment wheel, you will need a --segment-deg:45 and a different .wheel div
width. I'm using width: calc( 2 * var(--radius ) / 2.414);
, where 2.414 is the tangent of (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</reply0