여러 배경 그라데이션을 사용하여 CSS 원 섹터를 어떻게 만들 수 있나요?

CSS 원 섹터 그리기를 위한 다중 배경 그라데이션

순수한 CSS로 원을 그리는 것은 간단하지만 해당 원의 섹터를 어떻게 만들 수 있나요?

채색된 부분을 그리는 것보다 투명한 부분을 그리는 것이 효율적입니다. 흰색.

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

.ten {
    background-image:
        /* 10% = 126deg = 90 + ( 360 * .1 ) */
        linear-gradient(126deg, transparent 50%, white 50%),
        linear-gradient(90deg, white 50%, transparent 50%);
}

50%를 초과하는 경우 첫 번째 그라데이션은 투명 색상에서 녹색 색상으로 혼합되어야 합니다.

.seventyfive {
  background-image: linear-gradient(180deg, transparent 50%, green 50%), linear-gradient(90deg, white 50%, transparent 50%);
}

위 내용은 여러 배경 그라데이션을 사용하여 CSS 원 섹터를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!