CSS Triangles

I recently built a UI where I replaced an arrow with a CSS triangle. It was pretty simple. You just create a box with no width or height, just borders. The direction of the arrow is determined by which borders are visible and which are transparent. The example below is an arrow that points to the right.


.arrow-right {
width: 0;
height: 0;
border-top: 13px solid transparent;

border-bottom: 13px solid transparent;

border-left: 13px solid #f1f1f1;

}


Since there’s no content in the box, the borders automatically collapse on each other. The left border narrows as it moves to the right, the top and bottom borders narrow as they move to the left. Crazy, I know, but it works.
Variations:

.arrow-left {

width: 0;
height: 0;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
border-right: 13px solid #f1f1f1;

}
.arrow-top {
width: 0;
height: 0;
border-left: 13px solid transparent;

border-bottom: 13px solid #f1f1f1;
border-right: 13px solid transparent;

}
.arrow-bottom {
width: 0;
height: 0;
border-left: 13px solid transparent;
 
border-top: 13px solid #f1f1f1;
            
border-right: 13px solid transparent;

}

You can play around with the border-thickness to create triangles with more acute or obtuse angles. The lines will get jagged with some combinations, so you’ll have to massage the pixels a bit, to get smooth lines.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s