Creating CSS Triangles

Keeping the loading time down on your web site has a range of benefits from creating a better experience for the user to improving your Google search rank. So replacing images with CSS is good place to start when trimming the fat! In this article we'll look at how you can easily create triangles which are great to use on things like buttons using just a few lines of CSS.

HTML

To start with we'll setup four separate division containers for the triangles pointing in different directions:

<div class="arrowNorth"></div>
<div class="arrowSouth"></div>
<div class="arrowEast"></div>
<div class="arrowWest"></div>

CSS

Firstly we give the div a display of 'inline-block', this prevents the default behavior of it taking up all available space (instead we essentially have a div with no height or width). The triangle effect is then created with the div borders by manipulating the point where three of them meet. This is achieved by setting the borders next to the direction we want to point to transparent. You can manipulate the size and angle of the triangle by changing the border widths.

.arrowNorth
{
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 40px solid #ff0000;
    display:inline-block;
}

.arrowSouth
{
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-top: 40px solid #ff0000;
    display:inline-block;
}

.arrowWest
{
    border-bottom: 40px solid transparent;
    border-top: 40px solid transparent;
    border-left: 40px solid #ff0000;
    display:inline-block;
}

.arrowEast
{
    border-bottom: 20px solid transparent;
    border-top: 20px solid transparent;
    border-right: 20px solid #ff0000;
    display:inline-block;
}

Demo

Sign Up
comments powered by Disqus
Sign Up

Popular Tags

350x250

Need a web developer?

If you'd like to work with code synthesis on your next project get in touch via the contact page.