CODEWITHSUNDEEP
htmlcss
Boopathi Vkl
Boopathi Vkl

Reputation: 99

How to create multicolored circle in css

I have created multicolored circle in css. My problem is the bottom left circle was not working.

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

#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>

How can I fix this problem?

Upvotes: 3

Views: 616

Answers (6)

Banzay
Banzay

Reputation: 9470

It's very interesting issue. I thought about making an animation to this circle with pure CSS.

Here is a solution with a rotating activation on hover the div:

#circle-container
{
  width:100px;
  height:100px;
 }
#circle-container:hover {
  -webkit-animation: spin 2s infinite linear;
  -moz-animation:    spin 2s infinite linear;
  -o-animation:      spin 2s infinite linear;
  animation:         spin 1s infinite linear;
}
@keyframes spin {
  from {
    transform: rotate(0deg) ;
  }
  to {
    transform: rotate(360deg);
  }
}
.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>

And one more snippet with rotate circle once when mouse in and rotate back when mouse out

#circle-container
{
  width:100px;
  height:100px;
  transition: transform 1s;
 }
#circle-container:hover {
  transform: rotate(360deg);
}
.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>

Upvotes: 1

Prasath V
Prasath V

Reputation: 1356

You have missed the . in .bottom-left class

You write like this

bottom-left
{

}

But You have to write like this

.bottom-left
{

}

Upvotes: 1

Arun
Arun

Reputation: 1719

    .bottom-left {
  background: #782;
  border-bottom-left-radius: 50px;
  float: left;
  }

You have missed the . in .bottom-left class

Upvotes: 1

Darshan Prajapati
Darshan Prajapati

Reputation: 66

#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;
}

Use This css.

Upvotes: 0

Abhishek Pandey
Abhishek Pandey

Reputation: 13578

You gave line brake after . class selector 

}.
bottom-left
{

That's why your selector became invalid.

#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>

Upvotes: 1

realtymarker
realtymarker

Reputation: 77

You are missing "." before bottom-left it should be .bottom-left

Upvotes: 1

Related Questions