「CSS形」與圖像疊加

我有一個三角形：「CSS形」與圖像疊加

#tri{ 
width: 0; 
height: 0; 
float: right; 
border-top: 25px solid red; 
border-left: 25px solid transparent; 
}

我想整個三角形區域是一個鏈接，所以我所做的：

<a href="..."> 
    <div id="tri"> 
    </div> 
</a>

而且我也希望該地區以「剪切」背景圖像，使其不是紅色，而是圖像的三角形部分。

我試過無數的東西，但說實話，我只是猜測 - 它添加到#tri作爲背景圖像，添加img到div元素，因爲你已經知道這些沒有工作。

我認爲這是可能的，但我一直沒能找到一個例子，教程或類似的演示。

任何人都可以借我一把嗎？

http://jsfiddle.net/XSgwv/

來源

2013-07-07 OJFord

爲它創建小提琴.. http://jsfiddle.net/ –

所以，我創建了一個，鏈接在帖子中。（文章中的代碼的文字副本..） – OJFord

可能重複？ http://stackoverflow.com/questions/10969941/css3-triangle-shape-with-background-image – leoMestizo

我建議建立三角形的圖像並將其插入這樣的：

<a href="..."> 
<img class="tri" src="some.jpg" alt="red triangle" > 
</a>

您可以創建各種類改變三角形的觀看方式。

這樣：

<a href="..."> 
<img class="tri" alt="red triangle"/> 
</a> 


.tri{ 
width: 0; 
height: 0; 
float: right; 
border-top: 25px solid red; 
border-left: 25px solid transparent; 
}

請參閱： http://jsfiddle.net/yvytty/bwQJC/2/

我更喜歡使用類比的ID，就可以更容易的時候也使用JavaScript和越來越elementsById，只是一種習慣我在。

來源

2013-07-07 15:24:23

謝謝，不知道爲什麼我不是剛剛開始切圖片！ – OJFord

一些代碼片段：http://codepen.io/gcyrillus/pen/foGus http://codepen.io/gcyrillus/pen/dakFi –

可以使用HTML元素用於與元素來定義一個圖像映射。

<map name=a> 
    <area shape=rect coords=25,25,75,75 href=#fail href="http://www.example.com"> 
</map> 
<img usemap=#a src=image.png>

變化與三角座標座標..

來源

2013-07-07 15:20:07

我不能使用座標。它會在不同的位置出現多次，具體取決於其他元素的大小。 – OJFord

「CSS形」與圖像疊加

回答

相關問題