The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Page Border with Pseudo Elements

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #41631

    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](”)

    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](”)

    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?


    Oh, you champion. Thanks for the help :)

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.