<p>행운의 바퀴를 만드는 중인데 섹터 수에 따라 바퀴나 원을 만들고 상품 이름을 채워야 합니다. </p> <p>섹터 수가 고정된 원에 대한 코드를 완성했습니다. 다음은 6개 섹터를 포함하는 원의 예입니다. </p> <p> <pre class="brush:css;toolbar:false;">.wheel_container { 위치: 상대; --휠 크기: 360px; 너비: var(--wheel-size); 높이: var(--wheel-size); 여백-하단: 2.4em; } .바퀴 { 디스플레이: 플렉스; 내용 정당화: 센터; 위치: 상대; 오버플로: 숨김; 너비: 100%; 높이: 100%; 테두리 반경: 50%; 배경색: 청록색; --세그먼트 각도: 60deg; } .wheel div { 디스플레이: 플렉스; 내용 정당화: 센터; 항목 정렬: 중앙; 위치: 절대; 너비: calc((2 * 3.141592653589793 * (var(--wheel-size) / 2)) / 6); 높이: 50%; 클립 경로: 다각형(0 0, 50% 100%, 100% 0); 변형원점: 하단; 쓰기 모드: 수직-rl; } .wheel div > 글꼴 두께: 500; 글꼴 크기: 1rem; 텍스트 정렬: 중앙; 색상: rgba(0, 0, 0, 0.7); } .wheel div:nth-child(1) { 배경색: 베이지; 변환: 회전(calc(-1 * var(--segment-deg) / 2)); } .wheel div:nth-child(2) { 배경색: 청자색; 변환: 회전(calc(-3 * var(--segment-deg) / 2)); } .wheel div:nth-child(3) { 배경색: 진홍색; 변환: 회전(calc(-5 * var(--segment-deg) / 2)); } .wheel div:nth-child(4) { 배경색: 주황색; 변환: 회전(calc(-7 * var(--segment-deg) / 2)); } .wheel div:nth-child(5) { 배경색:보라색; 변환: 회전(calc(-9 * var(--segment-deg) / 2)); } .wheel div:nth-child(6) { 배경색: 노란색; 변환: 회전(calc(-11 * var(--segment-deg) / 2)); }</pre> <pre class="brush:html;toolbar:false;"><div class='wheel_container'> <div class='wheel'> <div><span>바나나</span></div> <div><span>망고</span></div> <div><span>딸기</span></div> <div><span>잭프루트</span></div> </div> </div></pre> </p> <p>휠의 둘레를 섹터 수로 나누어서 <code>.wheel div</code>의 <code>width</code> 속성을 결정하려고 했습니다. 그러나 <code>clip-path</code>의 다각형은 곡선이 아니고 이를 포함하는 <code><div></code> </p> <p><code><div></code> 너비에 일부 픽셀을 추가하여 6개의 섹터 원으로 원하는 효과를 얻을 수 있었습니다. </p> <p> <pre class="brush:css;toolbar:false;">.wheel_container { 위치: 상대; --휠 크기: 360px; 너비: var(--wheel-size); 높이: var(--wheel-size); 여백-하단: 2.4em; } .바퀴 { 디스플레이: 플렉스; 내용 정당화: 센터; 위치: 상대; 오버플로: 숨김; 너비: 100%; 높이: 100%; 테두리 반경: 50%; 배경색: 청록색; --세그먼트 각도: 60deg; } .wheel div { 디스플레이: 플렉스; 내용 정당화: 센터; 항목 정렬: 중앙; 위치: 절대; /* 수정 */ 너비: calc((2 * 3.141592653589793 * ((var(--wheel-size) + 37px) / 2)) / 6); 높이: 50%; 클립 경로: 다각형(0 0, 50% 100%, 100% 0); 변형원점: 하단; 쓰기 모드: 수직-rl; } .wheel div>스팬 { 글꼴 두께: 500; 글꼴 크기: 1rem; 텍스트 정렬: 중앙; 색상: rgba(0, 0, 0, 0.7); } .wheel div:nth-child(1) { 배경색: 베이지; 변환: 회전(calc(-1 * var(--segment-deg) / 2)); } .wheel div:nth-child(2) { 배경색: 청자색; 변환: 회전(calc(-3 * var(--segment-deg) / 2)); } .wheel div:nth-child(3) { 배경색: 진홍색; 변환: 회전(calc(-5 * var(--segment-deg) / 2)); } .wheel div:nth-child(4) { 배경색: 주황색; 변환: 회전(calc(-7 * var(--segment-deg) / 2)); } .wheel div:nth-child(5) { 배경색:보라색; 변환: 회전(calc(-9 * var(--segment-deg) / 2)); } .wheel div:nth-child(6) { 배경색: 노란색; 변환: 회전(calc(-11 * var(--segment-deg) / 2)); }</pre> <pre class="brush:html;toolbar:false;"><div class='wheel_container'> <div class='wheel'> <div><span>바나나</span></div> <div><span>망고</span></div> <div><span>딸기</span></div> <div><span>잭프루트</span></div> </div> </div></pre> </p> <p>그러나 6개 섹터에서 작동하는 코드는 8개 섹터에서는 작동하지 않습니다...</p> <p>제 생각에 해결책은 <code>clip-path</code>를 사용하는 SVG 패딩 규칙에 있을 것 같습니다. 그러나 SVG에 대한 나의 지식은 아직까지는 한계가 있으므로 도움이 필요합니다. 다른 솔루션도 환영합니다. </p>

<div class='wheel_container'>
  <div class='wheel'>
    
Apple
    
두리안
    <div><span>바나나</span></div>
    <div><span>망고</span></div>
    <div><span>딸기</span></div>
    <div><span>잭프루트</span></div>
    
    
빨간색
    <div><span>파란색</