Nizar AYARI Nizar AYARI - 15 days ago 5
Javascript Question

CSS: Circle with eight colors and only one div



div {
width: 200px;
height: 200px;
border-radius:100%;
background: linear-gradient(45deg, blue, blue 100%), linear-gradient(135deg, green, green), linear-gradient(225deg, yellow, yellow) , linear-gradient(225deg, red, red);
background-size: 50% 50%;
background-position: 0% 0%, 0% 100%, 100% 0%, 100% 100%;
background-repeat: no-repeat;
}

<div></div>





I'm trying to build a circle with 8 colors, could you please help me to tweak the code above?

Answer

div {
    width: 200px;
    height: 200px;
    border-radius:100%;
    background: linear-gradient(45deg, yellow 0%, yellow 50%, blue 50%, blue 100%), linear-gradient(135deg, gray 0%, gray 50%, green 50%, green 100%), linear-gradient(-45deg, black 0%, black 50%, #b2dba1 50%, #b2dba1 100%) , linear-gradient(-135deg, red 0%, red 50%, orange 50%, orange 100%);
    background-size: 50% 50%;
    background-position: 0% 0%,0% 100%, 100% 0%, 100% 100%;
    background-repeat: no-repeat;
}
<div></div>