CSS Shapes

Based upon http://www.webdesignviews.com/2013/06/create-shapes-in-css3/

by rulokc

HTML

<div class="square"></div>
<div class="triangle"></div>
<div class="diamond"></div>
<div class="trapezoid"></div>
<div class="parallelogram"></div>
<div class="pentagon"></div>
<div class="hexagon"></div>
<div class="hexagonb"></div>
<div class="circle"></div>
<div class="ellipse"></div>

CSS

.square {
    width: 100px;
    height: 100px;
    background-color: #fd0;
    display: inline-block;
}
.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 86px solid #8f0;
    display: inline-block;
}
.diamond {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid #f00;
    display: inline-block;
    position: relative;
}
.diamond:before {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: -100px;
    left: -50px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid #f00;
}
.trapezoid {
    width: 50px;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid #f80;
    display: inline-block;
}
.parallelogram {
    width: 100px;
    height: 100px;
    background-color: #fa0;
    display: inline-block;
    margin-left: 20px;
    -webkit-transform: skew(-30deg);
}
.pentagon {
    width: 50px;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 50px solid #f08;
    display: inline-block;
    position: relative;
}
.pentagon:before {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: -85px;
    left: -17px;
    border-left: 43px solid transparent;
    border-right: 43px solid transparent;
    border-bottom: 35px solid #f08;
}
.hexagon {
    width: 50px;
    height: 0;
    border-left: 33px solid transparent;
    border-right: 33px solid transparent;
    border-top: 50px solid #08a;
    display: inline-block;
    position: relative;
}
.hexagon:after {
    content: '';
    width: 50px;
    height: 0;
    border-left: 33px solid transparent;
    border-right: 33px solid transparent;
    border-bottom: 50px solid #08a;
    display: inline-block;
   ...