css - 特定边框的边框图像

Question

我使用 CSS 创建了一个三 Angular 形，效果很好。现在我想使用图像而不是颜色作为边框，但它不起作用。我只想要 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/

Answer 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>