8

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

6
  • 3
    The triangle looks fine to me in FF17.
    – j08691
    Commented Nov 29, 2012 at 17:09
  • 1
    What about Try border-style: inset if Firefox renders a strange gray border as the generator suggests? because here it looks just fine in ff17
    – fvu
    Commented Nov 29, 2012 at 17:12
  • I forgot this point, it lighten the color on firefox17
    – Adeher
    Commented Nov 29, 2012 at 17:16
  • 2
    I may have a solution (other than setting "inset" to border-style which alters the color) : using "rgba(XXX,YYY,ZZZ,0)" instead of "transparent", XXX YYY and ZZZ being the RGBA values of your triangle color. I'm working now on a fallback for IE8 & 7
    – Adeher
    Commented Nov 29, 2012 at 17:21
  • 1
    @Adeher if you find a good solution it's common practice here to add it as an answer, and accept your own answer.
    – fvu
    Commented Nov 29, 2012 at 17:31

2 Answers 2

9

This combination of Adeher's fix and the other dotted border fix seems to solve the problem perfectly in FF23.

In long form:

border-top: 10px solid #FF0000;
border-left: 30px dotted rgba(255, 0, 0, 0);
border-right: 30px dotted rgba(255, 0, 0, 0);

Combining Adeher's rgba() fix with the dotted border fix (but only on the transparent borders) seems to render a perfect triangle without ugly blurry borders.

8

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 :

border-color: transparent transparent transparent #ffffff;
border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #ffffff;

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.