特定邊框的邊框圖像

我使用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/

來源

2013-01-01 Maysam

這將讓更多或更少你想要什麼。長話短說，透明不會與邊界一起工作。你需要疊加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-01 14:12:22 specialscope

謝謝你的回答，但這是最簡單的解決方案。 – Maysam

基本上訣竅使基於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的東西。

正如我所提到的，至少在我看來，這個技巧主要是在圖像中，特別是邊框圖像中左下角和右下角的角落部分。這些角落本身需要讓它們的正方形在三角形的兩個底角上以適當的45度角包含1/2透明和1/2圖案。

隨着正確的圖像，這是相當直接的。

來源

2013-05-10 14:19:59 user784509

特定邊框的邊框圖像

回答

相關問題