CSS3 Shapes

by secretgspot

HTML

<div id="container">
    <div class="block">
        <h2>Circle</h2>
        <div id="circle"></div>
    </div>
    <div class="block">
        <h2>Square</h2>
        <div id="square"></div>
    </div>
    <div class="block">
        <h2>Oval</h2>
        <div id="oval"></div>
    </div>
    <div class="block">
        <h2>Up-Triangle</h2>
        <div id="up-triangle"></div>
    </div>
    <div class="block">
        <h2>Down-Triangle</h2>
        <div id="down-triangle"></div>
    </div>
    <div class="block">
        <h2>Left-Triangle</h2>
        <div id="left-triangle"></div>
    </div>
    <div class="block">
        <h2>Right-Triangle</h2>
        <div id="right-triangle"></div>
    </div>
    <div class="block">
        <h2>Triangle Top Left</h2>
        <div id="triangle-topleft"></div>
    </div>
    <div class="block">
        <h2>Triangle Top Right</h2>
        <div id="triangle-topright"></div>
    </div>
    <div class="block">
        <h2>Triangle Bottom Left</h2>
        <div id="triangle-bottomleft"></div>
    </div>
    <div class="block">
        <h2>Triangle Bottom Right</h2>
        <div id="triangle-bottomright"></div>
    </div>
    <div class="block">
        <h2>Trapezium</h2>
        <div id="trapezium"></div>
    </div>
    <div class="block">
        <h2>Diamond</h2>
        <div id="diamond"></div>
    </div>
    <div class="block">
        <h2>Diamond Shield</h2>
        <div id="diamond-shield"></div>
    </div>
    <div class="block">
        <h2>Rectangle</h2>
        <div id="rectangle"></div>
    </div>
    <div class="block">
        <h2>Parallelogram</h2>
        <div id="parallelogram"></div>
    </div>
    <div class="block">
        <h2>Five Point Star</h2>
        <div id="five-point-star"></div>
    </div>
    <div class="block">
        <h2>Twelve-point-star</h2>
        <div id="twelve-point-star"></div>
    </div>
    <div class="block">
        <h2>Six Point Star</h2>
        <div id="six-point-star"></div>
   ...

CSS

body {
    background: #666;
    color: #FFF;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
}

h2 {
    background: #333;
    font: 18px Arial;
    padding: 5px;
    border-radius: 5px;
}

#container {
    width: 300px;
    height: auto;
    margin: auto;
}

.block {
    width: 300px;
    height: auto;
    margin-bottom: 60px;
}

#circle {
    width: 140px;
    height: 140px;
    background: #F7F7F7;
    /*border-radius*/
    -webkit-border-radius: 70px;
    -moz-border-radius: 70px;
    border-radius: 70px;
    margin: auto;
}

#square {
    width: 140px;
    height: 140px;
    background: #f7f7f7;
    margin: auto;
}

#oval {
    width: 200px;
    height: 100px;
    background: #f7f7f7;
    /*border-radius*/
    -webkit-border-radius: 100px / 50px;
    -moz-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
    margin: auto;
}

#up-triangle {
    width: 0;
    height: 0;
    border-bottom: 120px solid #f7f7f7;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    margin: auto;
}

#down-triangle {
    width: 0;
    height: 0;
    margin: auto;
    border-top: 80px solid #f7f7f7;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
}

#left-triangle {
    width: 0;
    height: 0;
    border-right: 100px solid #f7f7f7;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    margin: auto;
}

#right-triangle {
    width: 0;
    height: 0;
    border-left: 100px solid #f7f7f7;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    margin: auto;
}

#trapezium {
    height: 0;
    width: 80px;
    border-bottom: 80px solid #f7f7f7;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    margin: auto;
}

#diamond {
    width: 80px;
    height: 80px;
    background: purple;
    margin: 50px 0 0 30px;
  ...