4 ms·
Here's a quick hack for a CSS arrow that casts a shadow. http://jsfiddle.net/BKtnn/1/ http://jsfiddle.net/BKtnn/1/ Adding border is a bit problematic but I'm
by bgarbiak 14y ago
Here's a quick hack for a CSS arrow that casts a shadow.
http://jsfiddle.net/BKtnn/1/ http://jsfiddle.net/BKtnn/1/
Adding border is a bit problematic but I'm sure solution could be found, just a question of few more minutes. Also, it should be doable in IE with filters.
- oe 14y agoYes, the designer in this project naturally wanted both a border and a box shadow. I don't know how to accomplish that in CSS without using additional elements. I'm currently using strategy #1, hoping that nobody notices :)
- pbhjpbhj 14y agoAs in the elsewhere linked CSS Hexagon tutorial (see last comment on http://jtauber.github.com/articles/css-hexagon.html http://jtauber.github.com/articles/css-hexagon.html) it's noted that there's a hexagon character. Well there are also triangle characters - which you could apply a [or multiple] shadow[s] to.
- btipling 14y agoThis solution doesn't work. This has a overlapping shadow issue right around where the arrow pops out of the box. It doesn't look as obvious on that tiny shadow you have, on wider shadows it is glaringly obvious and looks terrible.
- golden_apples 14y agoThat looks surprisingly good for me in Firefox, but from my experiments making these tricks work in production, browser standardization is a long way from the point where we can do this at arbitrary sizes in the real world. The problem, more than anything, is the way these css-only triangles get aliased. Since they're a side-effect of rendering borders, they never get properly anti-aliased the way fonts and shape edges do, and as a result the edges end up jagged at certain sizes and color combinations.