Question

I’m using a triangle on my website as shown on http://css-tricks.com/examples/ShapesOfCSS/

Sadly this doesn’t display correctly accross browsers when strechted a bit.

My code

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/

Makes firefox produce some darker line beneath the shape. Why is that and can I get rid of it?

Answer 1

It’s not a shadow, it’s color, it is because of the border-left, border-right colors

Demo

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;
}

Width Background Color

Few Examples : CSS triangle custom border color

As @Aleks Dorohovich said you can use rgba() CSS3 property and making borders opaque but (Note: Won’t work on <= IE8)