Grow your CSS skills. Land your dream job.

Page Border with Pseudo Elements

  • # December 27, 2012 at 11:31 pm

    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?

    # December 28, 2012 at 3:33 am

    I would use `box-shadow` to avoid the extra markup: http://jsfiddle.net/joshnh/HPnnC/

    # December 28, 2012 at 6:01 am

    Oh, you champion. Thanks for the help :)

    # December 28, 2012 at 7:18 am

    No worries!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".