5 odpowiedzi w tym temacie

[1stADXionC]

Witam.

Mam mały problem aby zrobić różna kolorowy w półokręgu.

W załączniku daje obrazek dla wglądu co chcę osiągnąć.

 

Kod:

<td style="width: 1300px;" class='first_column'>
<div class="container">
<div class="circle">
<div class="quarter red left"></div>
<div class="quarter yellow left"></div>
<div class="quarter green"></div>
<div class="quarter yellow right"></div>
<div class="quarter red right"></div>
<div class="cut"></div>
X °C
</div>

.circle 
{
    position: relative;
    width: 200px;
    height: 200px;
display: flex;
align-items: center;
justify-content: center;
}


.quarter 
{
    position: absolute;
    border-radius: 50%;
    width: 200px;
    height: 200px;
}


.quarter.red.left 
{
    background: red;
    clip: rect(0px, 25px, 100px, 0px);
    width: 200px;
}


.quarter.yellow.left 
{
    background: yellow;
    clip: rect(0px, 50px, 55px, 0px);
    width: 200px;
}


.quarter.green 
{
    background: green;
    clip: rect(0px, 100px, 40px, 0px);
    width: 200px;
}


.quarter.yellow.right 
{
    background: yellow;
    clip: rect(0px, 150px, 100px, 100px);
    width: 200px;
}


.quarter.red.right 
{
    background: red;
    clip: rect(0px, 25px, 100px, 0px);
    width: 200px;
}


.cut 
{
    position: absolute;
    top: 25%;
left: 25%;
width:200px; 
height:100px;
    background-color: white;
border-radius:100px 100px 0px 0px;
-moz-border-radius:100px 100px 0px 0px;
    pointer-events: none;
}

 

[Engi]

Nie ma żadnego załącznika. Spróbuj się tym pobawić. Wkleiłem Twój kod na tej stronie ale wygląda jak rozsypane puzzle, zarzuć screena z przykładem żeby było wiadomo o co chodzi.

[1stADXionC]

Nie wiem dlaczego nie ma załącznika.

Załączone miniatury

• 

[1stADXionC]

Nie mogłem edytować,

A taki efekt mam:

 

 

Załączone miniatury

• 

[1stADXionC]

https://codepen.io/r...per/pen/dyVyYrK

[Rivit]

https://stackoverflo...-various-colors ?