CSS 그라디언트만 사용하여 원형 섹터를 어떻게 만들 수 있나요?-CSS 튜토리얼-php.cn

CSS 그라디언트만 사용하여 원형 섹터를 어떻게 만들 수 있나요?

Mary-Kate Olsen

풀어 주다： 2024-11-30 22:09:12

원래의

536명이 탐색했습니다.

How Can I Create Circular Sectors Using Only CSS Gradients?

CSS로 원 섹터 그리기

CSS로 완전한 원을 그리는 것은 간단하지만, 원형 섹터를 만드는 것은 더 어려울 수 있습니다. 그러나 여러 배경 그라데이션을 사용하면 JavaScript를 사용하지 않고도 이를 달성할 수 있습니다.

그라디언트를 사용하여 섹터 그리기

섹터를 녹색으로 나타내는 대신 영역에 흰색 또는 투명한 부분을 그려 반전 효과를 만들 수 있습니다. 이는 두 개의 선형 그라데이션을 사용하여 수행됩니다.

첫 번째 그라데이션은 섹터의 각도를 덮고 중간점에서 투명에서 흰색으로 전환됩니다.
두 번째 그라데이션은 수직 각도에서 시작하고 중간 지점에서 흰색에서 투명으로 전환됩니다.

예를 들어 10%를 그리려면 섹터:

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

로그인 후 복사

첫 번째 그라데이션(126deg)에 지정된 각도는 90(360 * 백분율)으로 계산됩니다.

예:

<pie class="ten"></pie>
<pie class="twentyfive"></pie>
<pie class="fifty"></pie>
<pie class="seventyfive"></pie>
<pie class="onehundred"></pie>

로그인 후 복사

pie {
    border-radius: 50%;
    background-color: green;
    width: 5em;
    height: 5em;
    float: left;
    margin: 1em;
    border: 2px solid green;
}

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

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

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

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

.onehundred {
    background-image: none;
}

로그인 후 복사

이 기술을 사용하면 다양한 각도의 원형 섹터를 만들 수 있어 다양한 방법을 제공합니다. CSS를 사용하여 백분율이나 기타 데이터 값을 표현합니다.

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