Часто для того, чтобы изобразить треугольник на CSS использют технику slants. То есть элемент в 0px шириной и высотой c тремя border приличной ширины и одним нулевым. В этом блоге так оформлены уголочки у количества комментариев к постам на главной. Типичный код для этого выглядит так:
.triangle { width: 0; height: 0; border-top: 0; border-bottom: 60px solid #fee; border-left: 40px solid transparent; border-right: 40px solid transparent; }
FF и раньше чудил с отрисовкой треугольничков. Ту багу поправили, появилась новая:
Серый border в один пиксель тут явно лишний. Ни в одном другом браузере его нет.
Методом проб и ошибок поправил, но логики за всем этим так и не разглядел. Рабочий вариант без артефактов:
.triangle { width: 0; height: 0; border-top: 0; border-bottom: 60px solid #fee; border-left: 40px solid rgba(255, 255, 255, 0); border-right: 40px solid rgba(255, 255, 255, 0); }
UPD: вместо rgba можно использовать -moz-border-top-colors: transparent;.
Проявляется только в Windows и Linux.
Баги в трекере mozilla:
- https://bugzilla.mozilla.org/show_bug.cgi?id=644104
- https://bugzilla.mozilla.org/show_bug.cgi?id=646053
UPD: в 2016 это исправили.
