图像上的价格标签

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/

如果你想，你应该使用转换得到相似的结果。