CSS만 있는 인터랙티브하고 액세스 가능한 원형 웨지

프런트 엔드 개발자로서 거의 요청하지 않는 것 중 하나이지만, 그럴 때 웹에서 작동하는 예제를 찾기가 어렵습니다.

나는 모든 곳을 검색했고 많은 솔루션을 찾았습니다. 모두 매우 피상적입니다. 즉, 디자인 측면을 채우지만 결국에는 사용 가능하거나 액세스 가능한 요소를 제공하지 않습니다.

요청:

고객이 말합니다. "여기서 우리가 정말로 원하는 것은 회전하는 바퀴 모양의 것입니다. 마치 카니발에서와 같이 착지 위치에 따라 상을 받을 수 있는 것입니다. 하지만 회전하는 대신 각 쐐기가 [아무거나 삽입 너 여기 좋아] - 가능해?

그렇게 어렵지 않으니까 "그럼..."이라고 하시겠죠?

그리고 당신은 고통받습니다. 모든 솔루션은 클릭 가능하고 액세스 가능하며 스타일이 가능한 요소를 생성하지 않습니다.

해결책:

[tl;dr] Codepen

가장 간단한 형태로 컨테이너를 만들고 오버플로가 숨겨져 있고 border-radius: 50%가 포함된 완벽한 원인지 확인합니다.

마크업에서 내부 요소를 추가할 수 있습니다. 버튼, div, ul/ol 및 lis 등이 될 수 있습니다. 거기에 무엇을 넣느냐는 중요하지 않습니다. 중요한 것은 CSS 계산입니다. 여기 내 예제 HTML이 있습니다."

<div class="pie">
  <button>
    <span class="text">1</span>    
  </button>
  <button>
    <span class="text">2</span>
  </button>
  <button>
    <span class="text">3</span>
  </button>
</div>

내 예에서는 컨테이너의 이름을 .pie로 지정했습니다. 중요한 CSS는 다음과 같습니다.

.pie {
  border-radius: 50%;
  height: 150px;
  overflow: hidden;
  position: relative;
  width: 150px;
}

높이와 너비는 분명히 서로 일치해야 하지만 무엇이든 될 수 있습니다.

그런 다음 내부 요소 CSS를 제공하여 모두 초기에 파이 컨테이너의 1/4 사분면으로 나타나도록 합니다.

button {
  bottom: 50%;
  height: 100%;
  left: 50%;
  position: absolute;
  transform-origin: bottom left;
  width: 100%;
}

지금까지 가지고 있는 것은 다음과 같습니다.


transform-origin는 적절하지 않은 것처럼 보일 수 있지만 나중에 의미가 있으며 모든 것의 핵심입니다...

쐐기를 만드는 마지막 열쇠는 각 사각형을 쐐기로 변환하는 계산입니다. 이것은 다음의 정렬된 조합을 사용하여 수행됩니다.

transform: rotate()

transform: skeyY()

계산을 하려면 각 쐐기가 원에서 가져야 하는 각도를 알아야 합니다. 의 말을하자share = 120이것은 3개의 동일한 공유가 있는 우리의 예에 맞고 반복자가 필요합니다.i = 0(이것이 웨지 수에 관계없이 동적 JS 기능으로 어떻게 변환되는지 알 수 있을 것입니다...)

이제 계산은 나타나는 순서대로 쐐기별로 다음과 같습니다.
rotate = (i * share)degskeyY = (share - 90)degi++
쐐기가 정사각형으로 시작하기 때문에 마이너스 90

기본적으로 회전은 왼쪽 하단 모서리(파이의 중심)에 있는 쐐기를 그 앞에 있는 모든 쐐기의 각도만큼 회전시킵니다. skewY는 쐐기를 직사각형에서 올바른 각도의 쐐기로 기울입니다.

그런 다음 내부 요소의 skewY 및 회전에 대응해야 합니다(특히 텍스트를 원하는 경우). 이에 대한 계산은 다음과 같습니다.
rotate = (share / 2)degskewY(-(share - 90)deg
이렇게 하면 변환이 반전되고 텍스트가 포함된 '쐐기'를 기준으로 45도 회전하여 표시됩니다.

이제 마크업은 다음과 같이 표시됩니다.

<div class="pie">
  <button style="transform: rotate(0deg) skewY(30deg)">
    <span style="transform: skewY(-30deg) rotate(60deg)" class="text">1</span>    
  </button>
  <button style="transform: rotate(120deg) skewY(30deg)">
    <span style="transform: skewY(-30deg) rotate(60deg)" class="text">2</span>
  </button>
  <button style="transform: rotate(240deg) skewY(30deg)">
    <span style="transform: skewY(-30deg) rotate(60deg)"class="text">3</span>
  </button>
</div>

공정한 경고
순서 또는 변형 속성이 중요합니다. 순서를 바꾸면 작동하지 않습니다. 나는 그것을 알아낼 시간이 충분하지 않습니다. 그래서 여기 있는 누군가가 그것에 대해 설명하고 싶다면 - 해보세요!

다음은 결과를 더 잘 볼 수 있도록 약간의 추가 CSS를 사용하여 최종적으로 어떻게 보이는지 보여줍니다.



동적으로 만드는 데 관심이 있다면 다음은 매우 간단한 구현입니다.

주의사항과 생각...

Internet Exploder에서 이 작업을 시도하지 마십시오. 시도하지 않았으며 앞으로도 하지 않을 것입니다...

유일한 주의 사항은 최소 3개의 웨지로 제한된다는 것입니다. 최대값은 웨지의 내부 내용물과 '파이'의 전체 크기에 따라 달라집니다...

관심이 있다면 간단한 원형 차트 엔진에 아주 쉽게 적용할 수 있지만 자세한 내용을 파악할 시간이 없습니다.

도움이 필요한 사람이 이것을 발견하고 도움이 되기를 바랍니다 :-)