CSS Quarter Circle

HTML markup

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

CSS

.quarter-circle-top-left{
	width: 100px;
	height: 100px;
	background: #006699;
	border-radius: 0 0 100px 0;
	-moz-border-radius: 0 0 100px 0;
	-webkit-border-radius: 0 0 100px 0;
}
.quarter-circle-top-right{
     width: 100px;
     height: 100px;
     background: #117300;
     border-radius: 0 0 0 100px;
     -moz-border-radius: 0 0 0 100px;
     -webkit-border-radius: 0 0 0 100px;
}
.quarter-circle-bottom-left{
     width: 100px;
     height: 100px;
     background: #006699;
     border-radius: 0 100px 0 0;
     -moz-border-radius: 0 100px 0 0;
     -webkit-border-radius: 0 100px 0 0;
}
.quarter-circle-bottom-right{
     width: 100px;
     height: 100px;
     background: #117300;
     border-radius: 100px 0 0 0;
     -moz-border-radius: 100px 0 0 0;
     -webkit-border-radius: 100px 0 0 0;
}

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.


1 comment

Shawn2015-10-16 21:50

Nice and simple. Saved me from thinking too much.\r\nThanks,

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 lion *


Find us on Facebook

Tags

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

Back to Top