Recently, I wanted to create a website where the page had a double border on the top and bottom, as well as triangles pointing towards the content. These borders would stick to the bottom of the page even if there was limited content, but would be pushed down if there was a lot of content.
[Image of rough design](http://i.imgur.com/FKmxN.png “http://i.imgur.com/FKmxN.png”)
The way I achieved this was to apply a top/bottom border to the body tag, use the body tag’s pseudo elements for the triangles, then use a non-semantic tag (.border) to create the second layer of borders. I wanted to see if the way I achieved this was the best way possible and whether there was any quicker way to do it.
[My CodePen](http://codepen.io/David_Leitch/pen/xsGmF “http://codepen.io/David_Leitch/pen/xsGmF”)
I feel like there should be a simpler way to achieve this design that doesn’t require another non-semantic tag, but could not achieve the required behaviour when using just the html/body tags. Any advice?
