css3 only icons

by secretgspot

HTML

<h2>Square</h2>
<div id="square"></div>
<pre><code>#square {
   width: 140px; 
   height: 140px; 
   background: blue; 
}</code></pre>
<div class="clear space"></div>    
<h2>Circle</h2>
<div id="circle"></div>
<pre><code>#circle { 
   width: 140px;
   height: 140px;
   background: blue; 
   -moz-border-radius: 70px; 
   -webkit-border-radius: 70px; 
   border-radius: 70px;
}</code></pre>
<div class="clear space"></div>    
<h2>Oval</h2>
<div id="oval"></div>
<pre><code>#oval {
   width: 200px; 
   height: 100px; 
   background: blue; 
   -moz-border-radius: 100px / 50px; 
   -webkit-border-radius: 100px / 50px; 
   border-radius: 100px / 50px;
}</code></pre>
<div class="clear space"></div>    
<h2>Up Triangle</h2>
<div id="up-triangle"></div>
<pre><code>#up-triangle {
   width: 0; 
   height: 0; 
   border-bottom: 120px solid blue; 
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
}</code></pre>
<div class="clear space"></div>    
<h2>Down Triangle</h2>
<div id="down-triangle"></div>
<pre><code>#down-triangle { 
   width: 0; 
   height: 0;
   border-top: 120px solid blue;
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
}</code></pre>
<div class="clear space"></div>    
<h2>Left Triangle</h2>
<div id="left-triangle"></div>
<pre><code>#left-triangle {
   width: 0;
   height: 0;
   border-right: 100px solid blue;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
}</code></pre>
<div class="clear space"></div>    
<h2>Right Triangle</h2>
<div id="right-triangle"></div>
<pre><code>#right-triangle {
   width: 0;
   height: 0;
   border-left: 100px solid blue;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
}</code></pre>
<div class="clear space"></div>    
<h2>Triangle Top Left</h2>
<div id="triangle-topleft"></div>
<pre><code>#triangle-topleft { 
    width: 0; 
    height: 0; 
    border-top: 100px solid blue; 
    border-right: 100px...

CSS

body { padding: 32px; }

#square {
   width: 140px; 
   height: 140px; 
   background: blue; 
}
#circle { 
   width: 140px;
   height: 140px;
   background: blue; 
   -moz-border-radius: 70px; 
   -webkit-border-radius: 70px; 
   border-radius: 70px;
}
#oval {
   width: 200px; 
   height: 100px; 
   background: blue; 
   -moz-border-radius: 100px / 50px; 
   -webkit-border-radius: 100px / 50px; 
   border-radius: 100px / 50px;
}
#up-triangle {
   width: 0; 
   height: 0; 
   border-bottom: 120px solid blue; 
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
}
#down-triangle { 
   width: 0; 
   height: 0;
   border-top: 120px solid blue;
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
}
#left-triangle {
   width: 0;
   height: 0;
   border-right: 100px solid blue;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
}
#right-triangle {
   width: 0;
   height: 0;
   border-left: 100px solid blue;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
}
#triangle-topleft { 
    width: 0; 
    height: 0; 
    border-top: 100px solid blue; 
    border-right: 100px solid transparent; 
}
#triangle-topright { 
    width: 0; 
    height: 0; 
    border-top: 100px solid blue; 
    border-left: 100px solid transparent; 
}
#triangle-bottomleft { 
    width: 0; 
    height: 0; 
    border-bottom: 100px solid blue; 
    border-right: 100px solid transparent; 
}
#triangle-bottomright { 
    width: 0; 
    height: 0; 
    border-bottom: 100px solid blue; 
    border-left: 100px solid transparent; 
}
#trapezium {
   height: 0; 
   width: 80px;
   border-bottom: 80px solid blue;
   border-left: 40px solid transparent;
   border-right: 40px solid transparent;
}
#diamond {
   width: 80px; 
   height: 80px; 
   background: blue;
   margin: 3px 0 0 30px;
   /* Rotate */
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform:...