Coding css triangles post image

Coding css triangles

Posted on:

When Im coding a website there is usually at least 1 triangle in the design. From drop down arrows on menus/select boxes to list item styles, and using background images is fine, but if you need to changes them then it can be a little time consuming. So I have started doing them with CSS so they are fast and easy to change.

To code a triangle you need to think about a box which has no height or width and any border size you add to it gives it the height and width of the triangle.

css triangle

So for example, this diagram shows any border width you add automatically makes the shape of a triangle, and to fill it out you make the sides transparent.

 


.arrow-down {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #303030;
    height: 0;
    width: 0;
}

Arrow down example

 

You add the border color to the side you want the arrow pointing too. Play around with different border sizes to get different shapes and sizes.