RWSmith Designs.

Extraordinary Web Design

CSS Triangles

 

CSS triangles are a commonly used effect on webspages, the triangle only requiring a single div element and can be easily reused throughout the project

HTML:

We can create each triangle with a single div element. It would be useful to set a class for all directions.

CSS

Let’s set the common CSS properties for all the triangles:
Firstly we need to set the width and height properties of the div element to null.
Line 4 is just used for this demonstration to space out the triangles.

Now to style the individual arrows. The arrow effect is basically an empty element with null width and height, the arrow illusion itself is created using the CSS border property, the border width dictating the width and height of the triangle, as you can see below the direction can be a little confusing at first, but with some careful examination of the code below it should make sense – in the north arrow the border-bottom is colored, border-left and border-right are transparent forming a triangle facing to the north, or up.

Result

North

East

South

West

Even more directions

We can easily add another four directions to our palette with the same html elements..

Now we only need to declare two margins to create the triangles below. the width of these triangles will be half the number of pixels set in the border as these are essentially a triangle cut in half.

Result

North East

South East

South West

North West

On my next post I will demonstrate some practical applications for these triangles.

Comments

Leave a comment

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

RWSmith designs Extraordinary Web Design

Do you have a project in mind?

I’m currently available for freelance and accepting new project requests.

Contact meSee my process