Square

Hide   Copy Code

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

Hide   Copy Code

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

Circle

Hide   Copy Code

.circle {
    border-radius: 50%;
}

Hide   Copy Code

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

Oval

Hide   Copy Code

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

Hide   Copy Code

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

Target (multi-circles)

Hide   Copy Code

.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%;
}

Hide   Copy Code

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

Hide   Shrink    Copy Code

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

Hide   Copy Code

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

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

Hide   Shrink    Copy Code

/**********************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;
}

Hide   Copy Code

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

Hide   Copy Code

/* 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;
 }

Hide   Copy Code

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

Reff--

http://www.codeproject.com/Tips/1022374/Square-Circle-Ring-Oh-and-That-Smiley