Like many front-end devs, I’ve been using the border trick to render triangles in CSS.
http://apps.eky.hk/css-triangle-generator/ this generator helps with the technique.
Today, the Firefox team released a new version without any clear changelog on the rendering engine.
Now we can see an ungraceful gray border around those triangles. I haven’t found a trick to get rid of it yet.
edit : it’s easier to see if you force the “chess-like transparent” background to something like “green”
On top of that, before Firefox 17, when people were complaining about how aliased those triangles looked, an additional trick was to set the border-style property to “dashed” instead of solid.
Using firebug on the triangle generator, you can quickly see how it shows up now.
Does anyone know a fix for this?
edit : using border-style:inset as suggested renders a lighter color on my FF17
Ok here is the best solution I have so far :
get the rgb value of your triangle, and use this as a 0 opacity rgba instead of “transparent” for the opposing borders of your triangle.
Keeping the old syntax “transparent”-based will work as a fallback for IE8
that ends up with something like this :
as said in replies : setting the border-style to “inset” as suggested alters the color on FF17.
I hope somebody will find a simpler solution, or that this post will help other people.