Firefox 17 und CSS-Rahmen-basierte Dreiecke werden nicht korrekt gerendert

Question

Wie viele Frontend-Devs habe ich den Randtrick verwendet, um Dreiecke in CSS zu rendern. http://apps.eky.hk/css-triangle-generator/ Dieser Generator hilft bei der Technik.

Heute veröffentlichte das Firefox-Team eine neue Version ohne ein klares Änderungsprotokoll auf der Rendering-Engine.

Jetzt können wir eine unklare graue Grenze um diese Dreiecke sehen. Ich habe noch keinen Trick gefunden, um es loszuwerden. edit: es ist einfacher zu sehen, wenn Sie den "schachähnlichen transparent" Hintergrund zu etwas wie "grün"

zwingen Darüber, vor Firefox 17, wenn Leute sich darüber beschweren, wie Alias ​​diese Dreiecke aussahen, ein zusätzliches Der Trick bestand darin, die Eigenschaft border-style auf "gestrichelt" statt auf "fest" zu setzen.

Mit Firebug auf dem Dreiecksgenerator können Sie schnell sehen, wie es jetzt aussieht.

Kennt jemand eine Lösung dafür?

edit: mit border-style: nach innen versetzt, wie vorgeschlagen macht eine hellere Farbe auf meiner FF17

Answer 1

Ok hier ist die beste Lösung, die ich habe bisher:

den RGB-Wert des Dreiecks erhalten und die Nutzung Dies als 0 Opazität rgba anstelle von "transparent" für die gegenüberliegenden Grenzen Ihres Dreiecks.

die alte Syntax "transparent" Keeping -Basis als Ausweich für IE8 arbeiten

, die mit so etwas wie dies endet:

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

wie in Antworten gesagt: Einstellen der border-style zu "Einfügung" wie vorgeschlagen ändert die Farbe auf FF17.

Ich hoffe, jemand wird eine einfachere Lösung finden, oder dass dieser Beitrag anderen Menschen helfen wird.

Answer 2

Diese Kombination von Adehers Fix und der anderen gepunkteten Randfixierung scheint das Problem in FF23 perfekt zu lösen.

in Langform:

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

Adeher des RGBA() fix mit der gepunkteten Rahmen fix (aber nur auf den transparenten Grenzen) Kombinieren scheint ein perfektes Dreieck ohne hässliche verschwommene Grenzen zu machen.