CSS Triangles explained

A little bit of knowledge to share with the developers out there. Just wanted to set out some clear guidance on CSS triangles. It’s something most of us know how to do but normally with trial and error.

CSS trianlges are a great way of adding design to a website, without having to create an individual image. They require a bit more technical understanding but are hugely advantageous when compared to using the alternative.

Where to start

See the Pen CSS triangles by webteamDCC (@webteamDCC) on CodePen.0

  1. First you need an element to work around. This needs to have a height and width of 0px
  2. Add all the borders and set the colours to transparent
  3. Set to colour of the border you want to target, keeping in mind if you choose the left border it will point right,  and it will point down if you change the colour of the top border.
  4. If using an ‘::after’ or ‘::before’ element, make sure that it has, atleast, an empty content attribute, otherwise the element will not appear.

Another look

When Borders meet they normally have angled edges and this creates the angled edges of the triangle. The inside edge of the border is created by the height/width of the box so if this is set to 0, all of the internal sides of the borders are also reduced to 0, creating the point of the triangle.

Below is another codepen; There are four triangles of varying colors made from the borders of an element. When hovered, 100px is applied to the inner element’s width and height, removing the illusion, provided by the borders, of triangles.

See the Pen CSS trianlges interactive by webteamDCC (@webteamDCC) on CodePen.0

Useage of CSS trianlges

The most common useage of these are markers on menu items, or on the edge of elements to add some extra style.

This involves using the CSS psudeo element ‘::after’ or ‘::before’, or an absolute positioned containing element.

See the Pen Example of CSS trianlges in use by webteamDCC (@webteamDCC) on CodePen.0

 

For more informaiton on ::after and positioning elements, check out the W3schools articles here (::after) and here (positioning)

And that’s it!

Any questions, feel free to get in contact directly on liam.maclachlan@devon.gov.uk or less directly through the webteam mailbox

Liam Maclachlan

Working at DCC since late 2015. Developing WordPress themes, and plugins for the front and backend

More Posts - Website

Follow Me:
TwitterLinkedIn

Be the first to Comment

Your email address will not be published. Required fields are marked *

Comments are held for moderation. House rules