![CSS Hexicons](http://bradysammons.com/images/uploads/blog_images/hexicons.png)
This is a just a fun example of geometric shapes that can be achieved using only HTML and CSS. These are achieved using the :before and :after pseudo class elements. Basically these is a large triangular boarder, then a square div, then another triangular border and that make s up the outer shape. Going a little farther using SASS and Compass these elements are scalable using variables to define width and height.
Thus if I want any size I can just type it in and the padding, margins, and font size adjust appropriately.
Check out this Pen!