Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS: Circle with four colors and only one div

CSS: Circle with four colors and only one div

Problem

Is it possible to create a circle with four different Colors (one for each quarter) using pure CSS? I want something like one of these four circles:

Dots Logo http://a4.mzstatic.com/us/r1000/092/Purple2/v4/e4/2b/1a/e42b1aa7-c9c2-8fb6-ef10-90233e4a2333/mzl.lzjqqwlx.175x175-75.jpg

I can imagine using a solution with four divs and border-radius, but is this possible using only one div and some fancy css3?

Problem courtesy of: knub

Solution

Since you listed CSS3, you could do this with just borders and a rotation transformation to "fix" the alignment:

div {
    border-radius: 50px;
    border-style: solid;
    border-width: 50px;
    border-bottom-color: red;
    border-left-color: green;
    border-right-color: blue;
    border-top-color: yellow;
    height: 0px;
    width: 0px;

    /* To ratate */
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

http://jsfiddle.net/k8Jj9/

Solution courtesy of: skyline3000

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS: Circle with four colors and only one div

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×