將圖像背景放到CSS三角形

我試圖在使用CSS邊框創建三角形的div上放置背景圖像。這是我目前的努力。它可以用純色正常工作，但在圖像方面，我感到茫然。將圖像背景放到CSS三角形

HTML

<div class="wrapper"> 
    <div class="left triangle"></div> 
    <div class="right triangle"></div> 
</div>

CSS

.wrapper { 
    padding:50px 0px; 
    height: 50px; 
    position: relative; 
    width: 300px; 
    background: url("http://4.bp.blogspot.com/-dq50t26bK1o/TruhUtyIBWI/AAAAAAAANEw/kKnBQ1lSGik/s1600/bokeh_texture04.jpg"); 
} 

.triangle { 
    border-bottom: 50px solid #eee; 
    width: 50px; 
    position: absolute; 
    bottom: 0; 
} 

.right { 
    right: 0; 
    border-left: 100px solid transparent; 
} 

.left { 
    left: 0; 
    border-right: 100px solid transparent; 
}

的jsfiddle：http://jsfiddle.net/aRS5g/9/

所以，看着那JS小提琴，我如何作出這樣的灰色部分也是我喜歡的圖片背景，而不是必須使用＃111，#eee等顏色。

來源

2013-05-14 user2380171

Trying;但如果你已經在使用圖像，爲什麼不製作三角形圖像和透明的'div's並把它們放在角落？ – Passerby 2013-05-14 05:17:19

因爲它在響應式佈局上。三角形的寬度取決於屏幕上的大小。儘管如此，你的想法仍然有其優點 - 我可以讓它們變得非常長，以便它們在所有屏幕尺寸上均可以正常工作。感謝您的建議。 – user2380171 2013-05-14 05:22:30

http://stackoverflow.com/questions/23758922/transparent-arrow-triangle – pathfinder 2015-07-10 06:09:06

CSS中的三角形是一種破解，通過顯示元素的邊框部分而創建。因此，你看到的三角形本身不是一個元素，而是一個CSS邊框。

無法使用普通的CSS background-image樣式設置邊框的樣式，這是您開始看到CSS三角形的限制的地方，以及爲什麼它確實是一種黑客而不是一種好技術。

有一個CSS解決方案可以爲你工作：border-image。

border-image是一種CSS樣式，可以滿足您的期望;它將圖像放入元素的邊界。由於CSS三角形是邊框，因此可以使用它將背景圖像放到三角形上。

但是，事情變得複雜。風格的設計風格是邊框而不是三角形;它具有造型角和側面的功能，並適當地拉伸圖像。我沒有用三角形嘗試過，但我可以預測它可能有一些怪癖使得它很難使用。但隨時可以放手。

border-image的其他問題是瀏覽器支持。這是一種相對較新的CSS風格，並且在許多當前的瀏覽器（包括所有版本的IE）中完全不受支持。您可以在CanIUse處看到完整的瀏覽器支持表。

由於所有這些問題，我想建議，如果你想繪製形狀在瀏覽器中，你真的應該考慮刪除CSS黑客攻擊，並使用SVG或帆布。這些在大多數瀏覽器中都得到很好的支持，並且顯然支持您可能需要的所有繪圖功能。

CSS三角形是非常適合做偶爾的箭頭形狀，但是對於什麼比它是一個更容易使用正確的圖形，而不是試圖堆積越來越多的黑客進入你的CSS代碼更復雜。

來源

2013-05-14 06:59:22 Spudley

不錯的答案，+1 – 2013-05-14 07:41:21

設置爲接受的答案，非常簡潔。感謝您提供的信息，儘管我最終走的路徑是使用透明的.PNG來模擬效果。 – user2380171 2013-05-14 07:53:51

http://stackoverflow.com/questions/23758922/transparent-arrow-triangle – pathfinder 2015-07-10 06:09:20

-5

給一個div的背景圖像，你必須添加CSS規則

background-image:url("your image url here");

，以便類.triangle是這樣

.triangle { 
background-image:url("your url here"); 
background-repeat:no-repeat; 
border-bottom: 50px solid #eee; 
width: 50px; 
position: absolute; 
bottom: 0; 
}

還取決於你的背景圖像上應設置背景重複。 repeat-x使圖像重複出現在左側和右側（x軸），而repeat-y重複上下圖像（y軸）。如果您不想重複使用圖片，請使用無重複圖片，但我建議您使用固定的高度和寬度。

來源

2013-05-14 05:42:07 RynoZ

將圖像背景放到CSS三角形

回答

相關問題