Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web Graphics
Online Tools:

Advertise Here

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 (6)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 1 of 1 pages

Great tips, simply explained!
Posted by curdaneta on 03/23, 04:35 PM
wow it's not using triangle images..very simple
Posted by andhik on 03/23, 11:38 PM
Its nice, clean, what else you want !
Thank you so much !
Posted by Abhay Singh on 03/24, 11:06 AM
It's great to know I can add arrows to divs without using an arrow image. Simple but elegant! thumbs up!
Posted by Toyin on 03/26, 05:13 AM
how can I put a black boder outside and white black background
Posted by noone on 03/26, 11:20 PM
Very slick! Often wondered how to do that...thanks!
Posted by Tim on 03/28, 11:08 AM

Comment Pages 1 of 1 pages


Commenting is not available in this weblog entry.
Copyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.