Hostgator coupons for up to 99% off hosting for Dynamic Drive visitors!
Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

CSS Library: DIVs and containers: Here

CSS Triangle Arrow DIVs

Author: Dynamic Drive

An subtle characteristic of CSS that's been exploited to do something interesting is CSS borders and using it to create pure CSS triangles. These triangles have the advantage of being extremely lightweight (no image used) and scalable to boot. The technique works using the fact that the 4 CSS borders of an element meet at an angle; when the dimensions of the element is set to 0, the 4 borders collapse and touch one another, creating the appearance of 4 triangles:

Here's the CSS used to create the above DIV:

Style:

#triangles{
margin:3em;
width:0; /*set dimensions of DIV to 0 so its borders collapse and touch one 
another*/
height:0;
border-color: red blue green yellow; /*top, right, bottom, and left border*/
border-style: solid;
border-width: 50px; /*width of each border*/
}

Markup:

<div id="triangles"></div>

To display just a specific triangle then, you would set the border-color of all but the desired border side to transparent.

The following adds a CSS based triangle to a DIV to produce a speech bubble look that can be used to show comments, quotes etc. Each arrow is added to the DIV with no markup used by way of CSS Generated Content. The result are regular DIVs injected with progressive CSS enhancements that degrade well in less capable browsers.

Demo:

This is a test
This is a test
This is a test
This is a test

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 03/22/2011

Revision History: None

Usage Terms: Click here

Your Comments
Copyright 2006-2016 Dynamic Drive