Nasıl farklı renkler CSS kullanarak bir daire kesimi

SORU

23 Mayıs 2015, CUMARTESİ

Nasıl farklı renkler CSS kullanarak bir daire kesimi

İstediğimi yapabilmek için bir daire çizin bir parçasının başka bir renk istiyorum miktarda bir kesimi kaplı yapabilmek için artış aralığı 10% 0% 100%.

Google üzerinde herhangi bir örnek tüm sektörler parçaları değildir.

Segments

Şimdiye kadar bu ile gelmek mümkün olmuştur en iyisidir:

div.outerClass {
    position: absolute;
    left: 10px;
    top: 10px;
    height: 2.5px;
    overflow: hidden;
    -ms-transform: rotate(270deg); /* IE 9 */
    -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
    transform: rotate(270deg);
}

div.innerClass {
    width: 10px;
    height: 10px;
    border: 5px solid green;
    border-radius: 36px;
}

<div class="outerClass">
    <div class="innerClass"></div>
</div>

0%, 50% 100% yapıyorum.

CEVAP

23 Mayıs 2015, CUMARTESİ

Çapraz tarayıcı çözüm:

JSFiddle

.circle {
    border-radius: 50%;
    background: gray;
    width: 300px;
    height: 300px;
    overflow: hidden;
}
.segment {
    float: left;
    width: 10%;
    height: 100%;
}
    .segment_1 {
        background: red;
    }
    .segment_2 {
        background: green;
    }
    .segment_3 {
        background: yellow;
    }
    .segment_4 {
        background: blue;
    }

<div class="circle">
    <div class="segment segment_1"></div>
    <div class="segment segment_2"></div>
    <div class="segment segment_3"></div>
    <div class="segment segment_4"></div>
</div>

Bunu Paylaş: