RMCreative.ru - Блог Голосов: 1 Адрес блога: http://rmcreative.ru/feed/ Добавлен: 2008-06-12 21:34:00 блограйдером ZaiSL

Лишний border у треугольников в Firefox

Часто для того, чтобы изобразить треугольник на 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);
}

Посмотреть вживую