5

我正在尝试使用 CSS 创建三角形样式，但是如下所示，边框上出现了一条黑线。它只出现在 Firefox 中，而不出现在 Chrome 或 IE 中。

在此处输入图像描述

是什么导致了这种情况以及如何解决这个问题？

这是我的代码：

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/

4

3 回答 3

3

尝试改变：

border-color: transparent transparent yellow transparent;

到

border-color: transparent #FFF yellow transparent;

更新了 jsFiddle

于 2013-02-24T08:41:16.640 回答
1

您可以将模糊边框声明为border-style:inset，并在 Firefox 中将其清除。只需从以下位置更改您的样式： 

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

到 

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

在 Windows 7 上的 ff19 和 chrome 版本 26.0.1410.12 dev-m 中为我工作

于 2013-02-28T03:18:53.180 回答
0

尝试：边框样式：实心虚线

于 2013-02-24T09:44:22.307 回答