Click here to Skip to main content
13,146,942 members (60,694 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

8.3K views
13 bookmarked
Posted 26 Aug 2015

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

, 26 Aug 2015
Rate this:
Please Sign up or sign in to vote.
Make some shapes, have some CSS fun

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!

JsFiddle

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Xun Ding
United States United States
A web developer who swims in the stream of ideas, fight it, enjoy it, and thrive. Hopefully!

You may also be interested in...

Comments and Discussions

 
BugQuarter (A Circle With 4 Quarter Pieces) Pin
AndrejBr31-Aug-15 2:04
memberAndrejBr31-Aug-15 2:04 
GeneralRe: Quarter (A Circle With 4 Quarter Pieces) Pin
Xun Ding31-Aug-15 16:58
memberXun Ding31-Aug-15 16:58 
GeneralMy vote of 5 Pin
Humayun Kabir Mamun27-Aug-15 1:18
memberHumayun Kabir Mamun27-Aug-15 1:18 
GeneralMy 5 Pin
Ashokkumar RV26-Aug-15 22:07
memberAshokkumar RV26-Aug-15 22:07 
GeneralMy vote of 4 Pin
Abhishek Kumar Goswami26-Aug-15 21:48
professionalAbhishek Kumar Goswami26-Aug-15 21:48 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.170915.1 | Last Updated 26 Aug 2015
Article Copyright 2015 by Xun Ding
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid