CSS만 사용하여 백분율 원형 차트를 어떻게 만들 수 있나요?

CSS만 사용한 백분율 원형 차트

CSS만을 사용하여 정적 원형 요소를 만들려면 특정 CSS 속성을 이해해야 합니다.

요소 # 2 생성

특정 비율을 나타내는 요소 #2를 생성하려면 CSS 속성 conic-gradient를 사용하세요. 이 속성은 정점이 상위 요소의 중앙에 위치하는 원뿔 모양의 그라데이션을 만듭니다. 원뿔의 각도는 백분율 값으로 결정되며 100%는 완전한 원을 나타냅니다.

백분율 값 관리

다양한 백분율에 대해 요소 #2의 모양을 관리하려면 조합을 활용하세요. CSS 속성:

• conic-gradient: 원뿔의 각도를 조정하여 백분율.
• 클립 경로: 원뿔형 그라데이션의 가시 영역을 제한하려면 원형 클립 경로를 사용하세요. 이렇게 하면 작은 백분율과 큰 백분율 모두에 대해 모양이 올바르게 표시됩니다.

애니메이션

원형 차트에 애니메이션을 적용하려면 애니메이션 속성을 사용하고 백분율을 설정하는 from 상태를 정의합니다. 0. 백분율 값을 점진적으로 증가시키면 원형 차트가 점점 채워집니다.

둥근 가장자리

둥근 가장자리를 얻으려면 두 가지 색상 정지점과 함께 방사형 그라데이션을 사용하세요. 98%의 첫 번째 스톱은 미묘한 하이라이트를 만들고, 100%의 두 번째 스톱은 #0000을 사용하여 선명한 경계를 만듭니다. 마스크 또는 -webkit-mask를 적용하여 그라디언트 부분을 선택적으로 숨깁니다.

샘플 코드

.pie {
  --p: 20;
  --b: 22px;
  --c: darkred;
  --w: 150px;
  
  width: var(--w);
  aspect-ratio: 1/1;
  position: relative;
  display: inline-grid;
  margin: 5px;
  place-content: center;
  font-size: 25px;
  font-weight: bold;
  font-family: sans-serif;
}

.pie:before {
  content: "";
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(farthest-side, var(--c) 98%, #0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p)*1%), #0000 0);
  mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
}

.pie:after {
  inset: calc(50% - var(--b)/2);
  background: var(--c);
  transform: rotate(calc(var(--p)*3.6deg - 90deg)) translate(calc(var(--w)/2 - 50%));
}

위 내용은 CSS만 사용하여 백분율 원형 차트를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!