邊框內的圖像

我使用以下CSS代碼創建了一個三角形。邊框內的圖像

width: 0; 
    height: 0; 
    border-left: 100px solid transparent; 
    border-right: 100px solid transparent;  
    border-top: 60px solid #000;

這個邊框的背景顏色是黑色的，因爲我提到＃000但現在我需要在這個三角形內的圖像。我嘗試添加另一行到背景圖像屬性的CSS，但這樣做是在正方形背景而不是矩形背景中顯示完整圖像。

如何顯示帶有所需圖像的三角形。

來源

2012-12-16 lock

這是CSS，而不是HTML。 –

@John - 是的，CSS。你是對的！ – lock

我不認爲你可以做到這一點與純CSS和跨瀏覽器工作。你可以做的是在中間放置一個透明三角形的遮罩圖像，放置在其他圖像上。如果您將兩側顯示爲與您的頁面顏色相同，則會產生圖像爲三角形的錯覺。

你也可以使用畫布，並改變圖像使其成爲三角形。

就CSS支持而言，有一些掩碼設置。僅限Safari和Chrome支持，您可以使用-webkit-mask。對於Firefox，Safari，Chrome和Opera，您可以使用mask。雖然沒有IE支持。

來源

2012-12-16 15:38:25 scottheckel

可以像this example這樣做嗎？

樣式表：

div { 
    width: 0; 
    height: 0; 
    border-left: 100px solid transparent; 
    border-right: 100px solid transparent;  
    border-top: 60px solid #000; 
    position: relative; 
} 
div::after { 
    content: ""; 
    background: url('http://lorempixel.com/40/40/'); no-repeat; 
    width: 40px; 
    height: 40px; 
    position: absolute; 
    top: -60px; 
    left: -20px;  
}

來源

2012-12-16 15:40:53 NGLN

如果你確定與留出非WebKit的瀏覽器支持，嘗試尋找與-webkit-mask屬性掩蓋，因此您可以掩蓋你的形象成一個三角形。

這裏有他們的好文章：http://css-tricks.com/webkit-image-wipes/

來源

2012-12-16 20:28:08 Luke

邊框內的圖像

回答

相關問題