4

CSS を使用して三角形を作成しましたが、正常に動作します。境界線に色の代わりに画像を使用したいのですが、うまくいきません。のみのボーダー画像が欲しいborder-top。
それはオリジナルのCSSです：

.triangle-down
{
    position:absolute;
    width: 0;
    height: 0;
    border-left: 87px solid transparent;
    border-right: 87px solid transparent;
    border-top: 150px solid #14A2E0;

}

画像を使用するように変更された CSS です。

.triangle-down
{
    position:absolute;
    width: 0;
    height: 0;
    border-left: 87px solid transparent;
    border-right: 87px solid transparent;
    border-top: 150px solid;
    -moz-border-image:url(border.png) 30 30 round; /* Old Firefox */
    -webkit-border-image:url(border.png) 30 30 round; /* Safari */
    -o-border-image:url(border.png) 30 30 round; /* Opera */
    border-image:url(border.png) 30 30 round;   
}

JSFiddle: http://jsfiddle.net/MnPLh/

4

2 に答える 2

1

これにより、多かれ少なかれ、必要なものが得られます。簡単に言えば、透明は境界線では機能しません。2 つの CSS 要素を重ねる必要があります。http://jsfiddle.net/harendra/TfV8K/

.triangle-down
{
    position:absolute;
    width: 0;
    height: 0;
    border-left: 87px solid white;
    border-right: 87px solid white;
    border-top: 150px solid transparent;
    margin-top:153px;

}


.triangle-down1
{
    top:150px;
    position:absolute;
    width: 0;
    height: 0;
    border-image:url(http://jsfiddle.net/img/top-bg.png) 30 30 round;
    -moz-border-image:url(border.png) 30 30 round; /* Old Firefox */
   -webkit-border-image:url(border.png) 30 30 round; /* Safari */
   -o-border-image:url(border.png) 30 30 round; /* Opera */ 
    border-left: 87px solid transparent;
    border-right: 87px solid transparent;
    border-top: 150px solid transparent;  
}​

<div class='triangle-down1'></div>
<div class='triangle-down'></div>
于 2013-01-01T14:12:22.310 に答える