Изображение границы для определенной границы

Question

Я создал треугольник с помощью 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/

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> 

Answer 2

В основном Хитрость делает на основе треугольника CSS используется свойство границы изображения и фактически получить ожидаемый внешний вид, кажется, лежал в основном в изображении используется.

CSS, который я использовал в прошлый раз, я сделал это примерно так.

#pyramid{ 
    display:inline-block; 
    border: 150px outset transparent; 
    border-top:0px outset transparent; 
    border-left:150px outset transparent; 
    border-right:150px outset transparent; 
    border-image: url("pyramid_border_image.png") 150 150 150 150 stretch stretch; 
    overflow:visible; 
    height :1px; width:1px; 
    padding :0; margin:-1px; 
    } 

Я уверен, что может быть разбавлен некоторые, но в то время я просто хотел посмотреть, смогу ли я сделать это, но я мог бы быть пересматривают его в ближайшее время, как я хочу, пирамида для одного из моих CSS3 3d вещи.

Как я уже упоминал, трюк, по крайней мере, кажется мне главным образом на изображении, в частности угловые части для нижнего левого и нижнего правого углов на изображении границы. Эти углы сами по себе должны иметь свои квадраты с 1/2 прозрачным и 1/2 рисунком с соответствующими углами 45 градусов для двух нижних углов треугольника.

С правильно сделанным изображением, это довольно прямо вперед после этого.