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!