Boopathi Vkl Boopathi Vkl - 12 days ago 5
CSS Question

How to create multicolored circle in css

I have created multicolored circle in

css
. My problem is bottom left circle was not working.

Even if i give some colors to
.bottom-left
it was not showing.

Thanks in advance.



#circle-container
{
width:100px;
height:100px
}
.quarter
{
width:50px;
height:50px
}
.top-left
{
border-top-left-radius:50px;
background:#09f;
float:left;
}
.top-right
{
border-top-right-radius:50px;
background:#666;
float:right;
}.
bottom-left
{
border-bottom-left-radius:50px;
background:#782;
float:left;
}
.bottom-right
{
border-bottom-right-radius:50px;
background:#333;
float:right;
}

<div id="circle-container">
<div class="quarter top-left"></div>
<div class="quarter top-right"></div>
<div class="quarter bottom-left"></div>
<div class="quarter bottom-right"></div>
</div>





Thanks in advance.

Answer

You have missed the . in .bottom-left class

You write like this

bottom-left
{

}

But You have to write like this

.bottom-left
{

}