HTML CSS 서클 조각이 같지 않음

크기가 45 도인 8 개의 세그먼트가있는 무지개 동그라미를 만들려고합니다.HTML CSS 서클 조각이 같지 않음

주황색 세그먼트는 다른 세그먼트의 두 배 크기입니다. 나는 이것들이 1 번과 8 번이라고 생각한다. 그러나 그것들을 어떻게 분리 할 수 있는지는 알 수 없다. 내 학위가 틀렸어?

도움 주셔서 감사합니다.

body { 
 
    overflow: hidden; 
 
} 
 
.pie { 
 
    position: relative; 
 
    margin: 1em auto; 
 
    border: dashed 1px; 
 
    padding: 0; 
 
    width: 32em; 
 
    height: 32em; 
 
    border-radius: 50%; 
 
    list-style: none; 
 
} 
 
.slice1 { 
 
    overflow: hidden; 
 
    /**/ 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 50%; 
 
    height: 50%; 
 
    transform-origin: 0% 100%; 
 
    transform: rotate(-22.5deg) skewY(0deg); 
 
} 
 
.slice2 { 
 
    overflow: hidden; 
 
    /**/ 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 50%; 
 
    height: 50%; 
 
    transform-origin: 0% 100%; 
 
    transform: rotate(22.5deg) skewY(0deg); 
 
} 
 
.slice3 { 
 
    overflow: hidden; 
 
    /**/ 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 50%; 
 
    height: 50%; 
 
    transform-origin: 0% 100%; 
 
    transform: rotate(67.5deg) skewY(0deg); 
 
} 
 
.slice4 { 
 
    overflow: hidden; 
 
    /**/ 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 50%; 
 
    height: 50%; 
 
    transform-origin: 0% 100%; 
 
    transform: rotate(112.5deg) skewY(0deg); 
 
} 
 
.slice5 { 
 
    overflow: hidden; 
 
    /**/ 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 50%; 
 
    height: 50%; 
 
    transform-origin: 0% 100%; 
 
    transform: rotate(157.5deg) skewY(0deg); 
 
} 
 
.slice6 { 
 
    overflow: hidden; 
 
    /**/ 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 50%; 
 
    height: 50%; 
 
    transform-origin: 0% 100%; 
 
    transform: rotate(202.5deg) skewY(0deg); 
 
} 
 
.slice7 { 
 
    overflow: hidden; 
 
    /**/ 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 50%; 
 
    height: 50%; 
 
    transform-origin: 0% 100%; 
 
    transform: rotate(247.5deg) skewY(0deg); 
 
} 
 
.slice8 { 
 
    overflow: hidden; 
 
    /**/ 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 50%; 
 
    height: 50%; 
 
    transform-origin: 0% 100%; 
 
    transform: rotate(-67.5deg) skewY(0deg); 
 
} 
 
.slice-contents1 { 
 
    position: absolute; 
 
    left: -100%; 
 
    width: 200%; 
 
    height: 200%; 
 
    border-radius: 50%; 
 
    background: #ffff4d; 
 
    text-align: center; 
 
    transition: background-color .5s; 
 
} 
 
.slice-contents2 { 
 
    position: absolute; 
 
    left: -100%; 
 
    width: 200%; 
 
    height: 200%; 
 
    border-radius: 50%; 
 
    background: #9AC147; 
 
    text-align: center; 
 
    transition: background-color .5s; 
 
} 
 
.slice-contents3 { 
 
    position: absolute; 
 
    left: -100%; 
 
    width: 200%; 
 
    height: 200%; 
 
    border-radius: 50%; 
 
    background: #639b47; 
 
    text-align: center; 
 
    transition: background-color .5s; 
 
} 
 
.slice-contents4 { 
 
    position: absolute; 
 
    left: -100%; 
 
    width: 200%; 
 
    height: 200%; 
 
    border-radius: 50%; 
 
    background: #3869c3; 
 
    text-align: center; 
 
    transition: background-color .5s; 
 
} 
 
.slice-contents5 { 
 
    position: absolute; 
 
    left: -100%; 
 
    width: 200%; 
 
    height: 200%; 
 
    border-radius: 50%; 
 
    background: #1e3868; 
 
    text-align: center; 
 
    transition: background-color .5s; 
 
} 
 
.slice-contents6 { 
 
    position: absolute; 
 
    left: -100%; 
 
    width: 200%; 
 
    height: 200%; 
 
    border-radius: 50%; 
 
    background: #c682bb; 
 
    text-align: center; 
 
    transition: background-color .5s; 
 
} 
 
.slice-contents7 { 
 
    position: absolute; 
 
    left: -100%; 
 
    width: 200%; 
 
    height: 200%; 
 
    border-radius: 50%; 
 
    background: #9a1d34; 
 
    text-align: center; 
 
    transition: background-color .5s; 
 
} 
 
.slice-contents8 { 
 
    position: absolute; 
 
    left: -100%; 
 
    width: 200%; 
 
    height: 200%; 
 
    border-radius: 50%; 
 
    background: #f7941e; 
 
    text-align: center; 
 
    transition: background-color .5s; 
 
} 
 
.slice1 .slice2 .slice3 .slice4 .slice5 .slice6 .slice7 .slice8 .slice-contents1 .slice-contents2 .slice-contents3 .slice-contents4 .slice-contents5 .slice-contents6 .slice-contents7 .slice-contents8 { 
 
    transform: skewY(40deg) rotate(25deg); 
 
} 
 
.slice-contents1:hover { 
 
    background: #ffff1a; 
 
} 
 
.slice-contents2:hover { 
 
    background: #8db23c; 
 
} 
 
.slice-contents3:hover { 
 
    background: #588a3f; 
 
} 
 
.slice-contents4:hover { 
 
    background: #2d549b; 
 
} 
 
.slice-contents5:hover { 
 
    background: #132340; 
 
} 
 
.slice-contents6:hover { 
 
    background: #ad4f9e; 
 
} 
 
.slice-contents7:hover { 
 
    background: #85192d; 
 
} 
 
.slice-contents8:hover { 
 
    background: #f38809; 
 
}

<html> 
 

 
<body> 
 

 

 
    <ul class='pie'> 
 
    <li class='slice1'> 
 
     <div class='slice-contents1'>#</div> 
 
    </li> 
 
    <li class='slice2'> 
 
     <div class='slice-contents2'>#</div> 
 
    </li> 
 
    <li class='slice3'> 
 
     <div class='slice-contents3'>#</div> 
 
    </li> 
 
    <li class='slice4'> 
 
     <div class='slice-contents4'>#</div> 
 
    </li> 
 
    <li class='slice5'> 
 
     <div class='slice-contents5'>#</div> 
 
    </li> 
 
    <li class='slice6'> 
 
     <div class='slice-contents6'>#</div> 
 
    </li> 
 
    <li class='slice7'> 
 
     <div class='slice-contents7'>#</div> 
 
    </li> 
 
    <li class='slice8'> 
 
     <div class='slice-contents8'>#</div> 
 
    </li> 
 

 

 
    <ul> 
 

 

 
</body> 
 

 
</html>

출처

2014-09-29 Anonymous

시도해보십시오 http://codepen.io/jonobr1/pen/ieFnh –

또는 http://codepen.io/brbcoding/pen/mJkpf –

위의 코드에서 firefox로 나에게 잘 보이네요 – tfrascaroli

오 당신의 디자인에 따라 ... 당신이 .. 그 파이를 만들기 위해

을 사각형 요소 (리)와 다른 각도에서 회전을 사용하는 명백한 먹으 렴 각 li div 것 90 Degree 일 때마다 45 degree은 다른 요소에 의해 감추어집니다.

모든 요소에 대해 슬라이스 7까지는 잘 작동하지만 슬라이스 8의 각도는 90. 윌 코브 r 노란색 컬러 요소입니다. 8.

해결하기 위해

은 슬라이스 안에 숨겨진 (슬라이스 1) ..you 90 정도 나머지 만 당신 오렌지 요소 (슬라이스 8)를 알 수 있습니다 예를 들어 당신의 바이올린을 노란색 제외 좋다 당신은

.slice-contents8 { 
position: absolute; 
left: -100%; 
width: 200%; height: 200%; 
border-radius: 50%; 

text-align: center; 
transition: background-color .5s; 
background-image: linear-gradient(135deg, transparent 50%, #f7941e 50%), linear-gradient(90deg, white 50%, transparent 50%); 
} 

.slice8 { 
overflow: hidden; /**/ 
position: absolute; 
top: 0; right: 0; 
width: 50%; height: 50%; 
transform-origin: 0% 100%; 
transform: rotate(-112.5deg); 
}

는 아래의 데모를 보러 갈 것 ..your 파이를 다음과

가 변경합니다 ..이 적합 확인하기 위해 호를 줄여야합니다 Working Fiddle

출처

2014-09-29 15:55:40

호버가 작동하지 않는 상태에서 위와 동일한 문제가 발생했습니다. –

http://jsfiddle.net/ohxmoq1c/2/show/ 수정 됨. 확인하십시오. –

오렌지색은 현재 작동하지만 빨간색은 아닙니다. P –

HTML CSS 서클 조각이 같지 않음

답변

관련 문제