Почему Firefox показывает тень под моей формой CSS?

Question

Почему Firefox показывает тень под моей формой CSS?

Я использую треугольник на своем сайте, как показано на http://css-tricks.com/examples/ShapesOfCSS/

К сожалению, это не отображается правильно во всех браузерах, когда немного растянут.

Мой код

div.triangle {
    width:0px;
    height:0px;
    border-left: 55px solid transparent;
    border-right: 55px solid transparent;
    border-top: 15px solid #D5CDBA;
}

http://jsfiddle.net/mPSj9/5/

Заставляет firefox создавать более темную линию под формой. Почему это так и я могу от этого избавиться?

1

css firefox design stylesheet css-shapes

Источник

user691104 27 ноя '12 в 10:19

2 ответа

Решение

Попробуйте изменить прозрачное свойство на rgba с непрозрачностью 0

Например:

border-left: 55px solid rgba(255,255,255,0);
border-right: 55px solid rgba(255,255,255,0);

2

Источник

user696536 27 ноя '12 в 10:28

Другие вопросы по тегам css firefox design stylesheet css-shapes

user1542290 27 ноя '12 в 10:23 2012-11-27 10:23 · Accepted Answer · 2012-11-27 10:23

Это не тень, это цвет, это из-за border-left, border-right цвета

демонстрация

CSS

div.main-link-active-triangle {
    position:absolute;
    top:50px;
    left:50px;
    width:0px;
    height:0px;
    border-left: 55px solid transparent;
    border-right: 55px solid transparent;
    border-top: 55px solid #D5CDBA;
}

Ширина Цвет фона

Несколько примеров: CSS-цвет треугольника

Как сказал @Aleks Dorohovich, вы можете использовать свойство CSS3 rgba() и сделать границы непрозрачными, но (Примечание: не будет работать на <= IE8)