圖像上的價格標籤

Question

如何在圖像上獲得價格標籤（使用純CSS），就像在此附加圖像中一樣？

我用

content:''; 
    width:0px; height:0px; 
    position: absolute; left:194px; top:-20px; 
    border:10px solid; 
    border-color: transparent transparent rgba(0,0,0,0.8) transparent; 

但它沒有幫助！

Answer 1

嘗試這樣的事情http://jsfiddle.net/chriscoyier/xtCb9/1/

Answer 2

你可以做一些like this

假設你將有價格標籤的圖像中的「標籤」身份證格，然後將圖像下方寫着

編輯

我已經更新了這個，所以你可以有東西like this你可以在它的價格與div

Answer 3

目前尚不清楚你目前得到的結果，只是它不起作用。所以也許你應該進一步詳細說明問題。

用於在三角形CSS-而已，你可以看看這個CSS帽子戲法，但它不允許文本或樣式添加到三角：http://css-tricks.com/snippets/css/css-triangle/

如果你想，你應該使用轉換得到相似的結果。