Code Snippet
CSS Triangle
HTML
You can make them with a single div. It's nice to have classes for each direction possibility.
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>CSS
The idea is a box with zero width and height. The actual width and height of the arrow is determined by the width of the border. In an up arrow, for example, the bottom border is colored while the left and right are transparent, which forms the triangle.
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
}
Trippy! I can’t get my head around it!
It’s basicly like a giant 3D border-corner. (when the left and top border-color are different the edge is diagonal, that’s being used to make this triangle).
Thanks, TeMc, now it all makes sense.
By the way, it’s fun to play with the inner div’s right border width, and change the shape and size of the triangle!
Clever. I like seeing CSS doing things it shouldn’t
Can you turn it?
http://www.cssplay.co.uk/menu/flag
Wow, nice job with the flag on your link…
Also, I wanted to ask why do you use ‘dashed’ instead of ‘solid’? I wasn’t able to understand the difference..
Cheers & congrats again.
Wow! Sweet!
Here’s one I use a fair amount for various things:
You can play with the border sizes to get various depths and such.
Anyone know why this looks like crap in webkit?
http://img825.imageshack.us/img825/3002/screenshot20100830at827.png
Maybe webkit can’t draw it the right way?
Like it. Thanks.
Cool trick, I tried it first after seeing it elsewhere.
Then I came across the ivy-leaf trick on this website, and if you want the triangle to scale with the text, change the ivy leaf to a triangle.
down: \25bc
up: \25b2
right: \25b6
I couldn’t find a “map”, but if you play around changing the last 4 digits in the url, you can find all kinds of cool stuff.
http://www.decodeunicode.org/en/u+25bc
Haha, funny trick.
This is amazing!! Thanks for sharing..
Thanks,
This is just want I was looking for :)
Now perfect in IE
You can use those triangles to create Real-time 3D objects in IE6. Yes, IE6!
http://www.uselesspickles.com/triangles/
Borders can also build a house:
http://www.designdetector.com/tips/3DBorderDemo2.html
I noticed a small issue with this technique in Firefox 5.0 (Win). FF 5.0 renders a light stroke on the front sides of the triangle. Here’s a link to a jsFiddle that replicates the issue:
http://jsfiddle.net/brightlight/4DmFk/
Obviously, you’ll need to view that in FF 5.0 (Win) to see what I’m talking about.
Update: Changing the border style to “inset” on the transparent sides of the element seems to fix this issue in Firefox 5 and 6. Other browsers continue to render the triangles fine even after this border-style adjustment.
In scenarios like below I get pixelation in Safari, IE and some yet less in FF. Is anyone else getting this ?
.point_bottom {
border-left: 200px solid transparent;
border-right: 200px solid transparent;
border-top: 80px solid #FF0000;
bottom: 0;
height: 0;
left: -101px;
position: absolute;
width: 0;
}