0

CSS のみを使用し、画像を使用せずにバナー効果を作成しようとしています。結果は次のようになります。

ここに画像の説明を入力

この例は、この jsfiddleの html と CSS を使用して作成されました。これは、バナー ( .widget-title)の CSS です。

.widget-title
{
    background-color: #B1DDC9;
    color: white;
    height: 24px;
    text-align: center;
}

.widget-title:before
{
    content: "";
    float:left;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 12px 0px 12px 12px;
    border-color: #B1DDC9 #B1DDC9 #B1DDC9 white;
}

.widget-title:after
{
    content: "";
    float:right;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 12px 12px 12px 0px;
    border-color: #B1DDC9 white #B1DDC9 white;
}

これは、デスクトップと電話でテストしたすべてのブラウザーで問題なく動作するようです。ただし、Ipad2 の Safari と Chrome の両方で、バナーの左右の外縁にかすかな細い線が表示されます。

ここに画像の説明を入力

この現象の原因は何ですか？それを解決するために私にできることはありますか？

4

2 に答える 2

-1

に変更border-width: 12px 0px 12px 12px; してみてくださいborder-width: 12px 2px 12px 12px;

たぶん、これは三角形の「後ろ」をバナーのすぐ外に伸ばし、線を取り除きます

于 2013-08-23T10:11:21.150 に答える