CSS 세그먼트가있는 반원

Question

아래 그림과 같이 5 개의 세그먼트로 반원을 만들려고합니다. 다양한 세그먼트 사이의 간격과 세그먼트 자체의 크기를 쉽게 조정할 수 있습니다.

CSS 반원 예

I 프론트 엔드 개발에서 매우 초보자 해요,하지만 여기 오기 전에 내 자신에 알아낼 수 있도록 내가 여러 자원을 시도 :

Building a Circular Navigation with CSS Transforms

Segments in a circle using CSS3

codepen 펜 톤

.

나는 유지 mixin의 방법 또는 SVG 솔루션을 압연하여 수학의 미친 톤 작업을 포함하지 않는 단순하고 순수 CSS 솔루션의 도움이 필요합니다.

어떤 도움을 주시면 감사하겠습니다 ... 저는 3 일 동안 여기에 있었는데 이것은 거의 마지막 수단입니다.

Answer 1

그래서 저는 이것을 이전 답변에서 가져 와서 올바른 모양으로 바꾸기 위해 약간 수정했습니다.

CSS의 제한 사항 때문에 SVG와 같은 것을 사용하지 않으면 각 세그먼트 사이의 간격이 어려워집니다.

완벽하지는 않으며 순수 CSS만으로 완벽하게 만들 수 없습니다.

---

.wheel, 
 
.umbrella, 
 
.color { 
 
    content: ""; 
 
    position: absolute; 
 
    border-radius: 50%; 
 
    width: 15em; 
 
    height: 15em; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.wheel { 
 
    overflow: hidden; 
 
    width: 15em; 
 
    height: 15em; 
 
    position: relative; 
 
    border: 1px solid black; 
 
    transform: rotate(270deg); 
 
    padding: 3px; 
 
} 
 
.umbrella { 
 
    position: relative; 
 
    -webkit-transform: scale(1.35); 
 
    margin: 3px; 
 
    padding: 5px; 
 
} 
 
.color, 
 
.color:nth-child(n+7):after { 
 
    clip: rect(0, 15em, 15em, 7.5em); 
 
} 
 
.color:after, 
 
.color:nth-child(n+7) { 
 
    content: ""; 
 
    position: absolute; 
 
    border-radius: 50%; 
 
    left: calc(50% - 7.5em); 
 
    top: calc(50% - 7.5em); 
 
    width: 15em; 
 
    height: 15em; 
 
    clip: rect(0, 7.5em, 15em, 0); 
 
} 
 
.color:nth-child(1):after { 
 
    background-color: #9ED110; 
 
    transform: rotate(30deg); 
 
    z-index: 12; 
 
} 
 
.color:nth-child(2):after { 
 
    background-color: #50B517; 
 
    transform: rotate(60deg); 
 
    z-index: 11; 
 
} 
 
.color:nth-child(3):after { 
 
    background-color: #179067; 
 
    transform: rotate(90deg); 
 
    z-index: 10; 
 
} 
 
.color:nth-child(4):after { 
 
    background-color: #476EAF; 
 
    transform: rotate(120deg); 
 
    z-index: 9; 
 
} 
 
.color:nth-child(5):after { 
 
    background-color: #9f49ac; 
 
    transform: rotate(150deg); 
 
    z-index: 8; 
 
} 
 
.color:nth-child(6):after { 
 
    background-color: #CC42A2; 
 
    transform: rotate(180deg); 
 
    z-index: 7; 
 
}

<div class="wheel"> 
 
    <ul class="umbrella"> 
 
    <li class="color"></li> 
 
    <li class="color"></li> 
 
    <li class="color"></li> 
 
    <li class="color"></li> 
 
    <li class="color"></li> 
 
    <li class="color"></li> 
 
    </ul> 
 
</div>

대안은 다음 CSS의 클립 경로로 참조되는 단일 SVG 모양을하는 것입니다. 위의 코드는 정확히 동일하게 유지 될 것입니다. 모양이 생성되는 방식이 변경 될 것입니다.