Square, Circle, Ring ..., Oh and That Smiley

Introduction

Do you know how to make a red square using CSS? Sure you know!

How about a circle? Piece of cake!

An oval? Hmm, I see you squint; your eyes dimmed a bit and then that light bulb in you flash. Yes, you got it.

How about cut your round cake into 4 quarters? How about we try to make it a donut?

How about we have a bit more fun, throw in a stupefied smiley face and make it go round and round and round? Why? I do not know, I saw someone do it in five lines of code, I think it is cool and deserves a smiley.

Ah, the fabulous world of CSS3! Yep, no more plain, boring old-fashioned CSS that your grandpa used to see in that ancient dial-up AOL age.

I feel like one day maybe I can just order up some CSS-3 to give myself a nice hair-do.

Ok, let’s roll out some CSS.

(Please note, unless specified, all of the following shapes uses the base shape CSS class.)

Check out the jsfiddle here (http://jsfiddle.net/dshun/k5b4sb7z/) for the following CSS shapes.

Square

.shape {
    width: 200px;
    height: 200px;
    background-color: red;
    margin: 5px;
    float: left;
}

<div class="shape"></div> 

Circle

.circle {
    border-radius: 50%;
}

<div class="shape circle"></div>

Oval

.oval {
    border-radius: 50%;
    height:100px;
}

<div class="shape oval"></div>

Target (multi-circles)

.circle.outer {
    position: relative;
}

.circle.inner {
    position: absolute;
    top: 24%;
    left: 24%;
    display: block;
    border: 3px solid #fff;
}

#circle2 {
    width: 100px;
    height: 100px;
}

#circle3 {
    width: 50px;
    height: 50px;
    left: 20%;
}

#circle4 {
    width: 25px;
    height: 25px;
    left: 16%;
}

<div class="shape circle outer">
        <div class="shape circle inner" id="circle2">
            <div class="shape circle  inner" id="circle3">
                <div class="shape circle  inner" id="circle4">
                </div>
            </div>
        </div>
    </div>

Quarter (A Circle With 4 Quarter Pieces)

.quarter-tile {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 5px;
}

.tile {
    position: absolute;
    border-radius: 50%;
    width: 200px;
    height: 200px;
}

.tile.green {
    background: green;
    clip: rect(0px, 200px, 100px, 100px);
    width: 200px;
}

.tile.blue {
    background: dodgerblue;
    clip: rect(0px, 100px, 100px, 0px);
    width: 200px;
}

.tile.orange {
    background: orange;
    clip: rect(100px, 100px, 200px, 0px);
    width: 200px;
}

.tile.yellow {
    background: yellow;
    clip: rect(100px,200px, 200px, 100px);
    width: 200px;
}

<div class="quarter-tile">
       <div class="tile green"></div>
       <div class="tile blue"></div>
       <div class="tile yellow"></div>
       <div class="tile orange"></div>
   </div>

Donut Ring (A Multi-Colored Circle with its Center Hollowed Out)

/**********************donut ring*/
.donut-ring {
    position: relative;
    width: 200px;
    height: 200px;
}

.ring {
    position: absolute;
    width: 50%;
    height: 50%;
}

.ring.red {
    top: 0;
    left: 0;
    background-color: red;
    border-radius: 100% 0 0 0;
}

.ring.blue {
    top: 0;
    right: 0;
    background-color: blue;
    border-radius: 0 100% 0 0;
}

.ring.orange {
    bottom: 0;
    left: 0;
    background-color: orange;
    border-radius: 0 0 0 100%;
}

.ring.green {
    bottom: 0;
    right: 0;
    background-color: green;
    border-radius: 0 0 100% 0;
}

.cutout {
    width: 50%;
    height: 50%;
    background-color: white;
    position: absolute;
    top: 25%;
    left: 25%;
    border-radius: 50%;
    pointer-events: none;
}

<div class="donut-ring">
    <div class="ring red"></div>
    <div class="ring blue"></div>
    <div class="ring orange"></div>
    <div class="ring green"></div>
    <div class="cutout"></div>
</div>

Finally, A Rotating Smiley (Just to Make You Happy!)

(Please check out here to see your friendly smiley rotating.)

/* Move in a circle without wrapper elements
  * Idea by Aryeh Gregor, simplified by Lea Verou
 */

 @keyframes rot {
     from {
         transform: rotate(0deg)
                    translate(-100px)
                    rotate(0deg);
     }
     to {
         transform: rotate(360deg)
                    translate(-100px)
                    rotate(-360deg);
     }
 }

 .smile {
     width: 40px;
     height: 40px;
     position: absolute;
     color:yellow;
     top: 300px;
     left: 50%;
     margin: -20px;
     font-size: 100px;
     animation: rot 5s infinite linear;
 }

<div class="smile">?</div>

Credits / References

Sure, I did not pull out the rabbits out of my own hat. I pull them out from other people's magic hats (with modifications). I also have forgotten some of the places from where I learned my tricks, so please send me an angry face when you find out. Thanks!

• Moving an element along a circle
• The shapes of CSS

JsFiddle

JsFiddle is available at http://jsfiddle.net/dshun/k5b4sb7z/.