我正在尝试使用CSS创建三角形样式,但边框上会出现一条暗线,如下所示.它仅出现在Firefox中,而不是Chrome或IE中.
造成这种情况的原因以及如何解决这个问题?
这是我的代码:
HTML:
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/
最佳答案
尝试改变:
border-color: transparent transparent yellow transparent;
至
border-color: transparent #FFF yellow transparent;
已更新jsFiddle