Dynamic Drive CSS Library- CSS Triangle Arrow DIVs

CSS Library

CSS Layouts

Web Graphics

Free 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

The CSS:

<style>

.uparrowdiv, .downarrowdiv, .leftarrowdiv, .rightarrowdiv{
width:600px;
min-height:40px; /*min height of DIV should be set to at least 2x the width of the arrow*/
background: black;
color:white;
padding:5px;
position:relative;
word-wrap:break-word;
-moz-border-radius:5px; /*add some nice CSS3 round corners*/
-webkit-border-radius:5px;
border-radius:5px;
margin-bottom:2em;
}

.uparrowdiv:after{ /*arrow added to uparrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:-20px; /*should be set to -border-width x 2 */
left:30px;
width:0;
height:0;
border-color: transparent transparent black transparent; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;

}

.downarrowdiv:after{ /*arrow added to downarrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:100%; /*should be set to 100% */
left:30px;
width:0;
height:0;
border-color: black transparent transparent transparent; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;
}

.leftarrowdiv:after{ /*arrow added to leftarrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:10px;
left:-20px; /*should be set to -border-width x 2 */
width:0;
height:0;
border-color: transparent black transparent transparent; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;
}

.rightarrowdiv:after{ /*arrow added to rightarrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:10px;
left:100%; /*should be set to 100% */
width:0;
height:0;
border-color: transparent transparent transparent black; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;
}

</style>

The HTML:

<div class="uparrowdiv">
This is a test
</div>

<div class="downarrowdiv">
This is a test
</div>

<div class="leftarrowdiv">
This is a test
</div>

<div class="rightarrowdiv">
This is a test
</div>

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.