Div Border triangle using only css

Questo articolo è stato scritto oltre 1 years, il contenuto potrebbe essere datato.

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 🙂

Liked it? Take a second to support Mte90 on Patreon!
Become a patron at Patreon!

Leave a Reply

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