CSS만 사용하여 원 섹터를 만드는 방법은 무엇입니까?

CSS로 원 섹터 그리기

문제: pure를 사용하여 원의 섹터를 그리는 방법 CSS?

해결책:

기존 CSS 기술은 전체 원을 만든 다음 마스크로 오버레이하여 원하는 섹터를 표시하는 데 중점을 둡니다. 그러나 보다 효율적이고 동적인 솔루션을 위해 여러 배경 그라데이션을 활용할 수 있습니다.

CSS 코드:

.pie {
  border-radius: 50%;
  background-color: green;
}

.ten {
  background-image: linear-gradient(126deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%);
}

설명:

1. .pie 클래스는 녹색 배경과 둥근 모양으로 전체 원을 정의합니다. 모서리.

2. .ten 클래스는 두 개의 선형 그라데이션을 오버레이하여 10% 섹터(또는 126도)를 만듭니다.

   • 첫 번째 그라데이션(126도)은 흰색을 만듭니다.
   • 두 번째 그라데이션(90도)은 마스크 역할을 하여 섹터의 녹색 배경을 드러냅니다. 비섹터 영역.

맞춤형 섹터 확장:

위 기술을 수정하여 모든 각도의 섹터를 만들 수 있습니다.

.custom-sector {
  background-image:
    linear-gradient((90 + (360 * START_ANGLE / 100))deg, transparent 50%, white 50%),
    linear-gradient(90deg, white 50%, transparent 50%);
}

START_ANGLE을 원하는 각도(0~360)로 바꾸세요. 해당 각도를 나타내는 부채꼴을 그립니다.

위 내용은 CSS만 사용하여 원 섹터를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!