CSS Circle

HTML markup

<div class="circle"></div>
<div class="half-circle-up"></div>
<div class="half-circle-down"></div>
<div class="half-circle-left"></div>
<div class="half-circle-right"></div>

CSS

.circle{
     height: 100px;
     width: 100px;
     border-radius: 100px;
     -moz-border-radius: 100px;
     -webkit-border-radius: 100px;
     background: #117300;
}
.half-circle-up{
     height: 50px;
     width: 100px;
     border-radius: 100px 100px 0 0;
     -moz-border-radius: 100px 100px 0 0;
     -webkit-border-radius: 100px 100px 0 0;
     background: #117300;
}
.half-circle-down{
     height: 50px;
     width: 100px;
     border-radius: 0 0 100px 100px;
     -moz-border-radius: 0 0 100px 100px;
     -webkit-border-radius: 0 0 100px 100px;
     background: #006699;
}
.half-circle-left{
     height: 100px;
     width: 50px;
     border-radius: 100px 0 0 100px;
     -moz-border-radius: 100px 0 0 100px;
     -webkit-border-radius: 100px 0 0 100px;
     background: #117300;
}
.half-circle-right{
     height: 100px;
     width: 50px;
     border-radius: 0 100px 100px 0;
     -moz-border-radius: 0 100px 100px 0;
     -webkit-border-radius: 0 100px 100px 0;
     background: #006699;
}

Demo »


Go Daddy


Related articles

Vecteezy - Free Vector Art

Vecteezy - Free Vector Art

05/08/2016

If you need Free Vector Art do not hesitate: visit Vecteezy.com

Free vector icons

Free vector icons

31/01/2016

Want to have some vector icons, free? Try this nice website.

Beautiful free stock photos from StockSnap

Beautiful free stock photos from StockSnap

11/12/2015

Would you like some cool stock photos for free? Check out this article, and try this website.


Leave a comment

We welcome any comment from you! Please keep in mind that comments are moderated and rel='nofollow' is in use. So, please do not use a domain as your name or a spammy keyword, or your comment will be deleted.

Name: *

E-mail: *

Message: *

Click on the car *


Find us on Facebook

Tags

Get online with the world's Best - GoDaddy.com!

Back to Top