Div Border triangle using only css

This article has been written before more than 1 years, information might old.

It’s an experiment how to create a div with border triangle with css.
For take the css code of triangle i have used CSS Triangle Generator.

This is the demo result:http://dabblet.com/gist/2394716

This code consist in a div with 9 div child, two for triangle and 1 for the bar.
The trick it’s a div with the color of the background of the page that overlap with another div with the color of the border of the bar, the div with *-over class are the div overlapped.

The rest of the code are positioning of the div and the dimension of the triangle for a correct overlapping.
Also i have added a css hack for Firefox that with the border triangle (tips readable in the Css Triangle Generator) can generate a small grey shadow.
For fix it i have add insted of border-style:inset or outset

border-style: solid solid outset solid;

This hack work for all the triangles and not create problem with the other browsers.
This experiment work with the all the browser except IE6.

This is an example of the power of css, Enjoy 🙂

Leave a Reply

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

CSS

Div Border triangle using only css

time to read: 1 min
0