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
- First you need an element to work around. This needs to have a height and width of 0px
- Add all the borders and set the colours to transparent
- 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.
- If using an ‘::after’ or ‘::before’ element, make sure that it has, atleast, an empty content attribute, otherwise the element will not appear.
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.
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.