Geek asks and answers

Strange issue with Firefox

I am trying to create a triangle style shape using CSS, but there a dark line appears on the border, as you can see below. It only appears in Firefox, not in Chrome or IE.

enter image description here

What causes this and how can this be fixed?

Here is my code:

HTML:

<div>
    <h1>Hello</h1>
</div>

CSS

div{
    margin: 20px;

}
h1{
    background: yellow;
    padding: 30px;  
    position: relative;
    color: #FFFFFF;
    float: left;
    margin-right: 20px;  
}

h1:before{
    position: absolute;
    left: 100%;
    top: 0;
    content: "";
    border: 20px solid yellow;
    border-width: 0px 50px 80px 0px;
    border-color: transparent transparent yellow transparent;
}

JSFiddle: http://jsfiddle.net/TrQEH/

+5
source share
3 answers

try changing:

border-color: transparent transparent yellow transparent;

to

border-color: transparent #FFF yellow transparent;

Updated jsFiddle

+3
source

You can declare this fuzzy boundary side as border-style:inset, and it will clear it in firefox. just change your styles:

border: 20px solid yellow;  
border-width: 0px 50px 80px 0px;  
border-color: transparent transparent yellow transparent;</code>

to

border-style:solid inset solid solid;  
border-width: 0px 50px 80px 0px;  
border-color: transparent transparent yellow transparent;

works for me in ff19 and chrome Version 26.0.1410.12 dev-m on windows 7

+1
source

try: border-style: solid dotted

0
source

More articles:


All Articles