How to create multicolored circle in css

Question

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 1

You have missed the . in .bottom-left class

You write like this

bottom-left
{

}

But You have to write like this

.bottom-left
{

}

How to create multicolored circle in css

Sign up