Border у фигуры

[inex]

Раньше не юзал фигуры, решил попробовать, ну тут какие-то грабли))

div {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

получается красный треугольничек, но мне надо цвет #F7F7F7, меняю, и о чудо, у треугольника появляется border, что за странность?

[Viper]

_http://jsfiddle.net/webviper/G6FqE/

[inex]

Чёрный фон не катит...нужно фон #ececec а фигура #f7f7f7

[Viper]

серьезно, что-ли?) Edited December 14, 2012 by Viper

[lexxcode]

inex, есть такая фишка в Firefox решается довольно просто это мне когда-то добрый дядя s0rr0w подсказал.

Просто там где используется transparent, нужно вместо solid поставить inset

[inex]

alexriz, спасибо, то что нужно

[Viper]

alexriz, а в какой версии FF она(эта фишка) проявляеться?

[lexxcode]

Viper, с Fx4+ вроде, может и раньше, точно не знаю. Оно не везде наблюдается даже, я когда столкнулся с этим, то не видел этого бага, на win7, а у другого на winXP было, у третьего на том же win7 тоже было. Сейчас у себя на win8 отчетливо наблюдаю данную проблему. На Linux версиях браузера помню тоже проявлялся этот баг. В то время это оказалось единственным местом где я смог увидеть проблему. Так, что "Скандалы, интриги, расследования..."

[SelenIT]

Фишка из-за того, что transparent — это rgba(0,0,0,0). И Fx пытается нарисовать на стыке бордеров что-то типа градиента, чтобы переход был плавным. Так что можно оставить solid, но вместо transparent использовать rgba(247,247,247,0) (прозрачный #f7f7f7).