1

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?

jbutler483
  • 24,074
  • 9
  • 92
  • 145
unR
  • 1,298
  • 14
  • 21

2 Answers2

4

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)

Community
  • 1
  • 1
Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
  • well yes, but I need to have the triangle flat angeled and only 15px high. – unR Nov 27 '12 at 10:28
  • nice work, editing your answer to something totally different after the other dude posted the working solution :) – unR Nov 27 '12 at 10:33
  • @unR Editing to a correct answer in not a bad thing, its the site which says edit the answers and correct them, I respect his answer too..I was going to state his name too there – Mr. Alien Nov 27 '12 at 10:38
  • in that case, accepted (for good formatting) - now go upvote the guy – unR Nov 27 '12 at 10:39
  • @unR Actually thank you but you should accept his answer as that was the first which solved your issue, I just informed you the issue but he solved – Mr. Alien Nov 27 '12 at 10:42
2

Try to change transparent property to rgba with opacity 0

For example:

border-left: 55px solid rgba(255,255,255,0);
border-right: 55px solid rgba(255,255,255,0);
Aleks Dorohovich
  • 1,622
  • 1
  • 13
  • 17