html - 图片上的价格标签

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

你可以做这样的事情

假设您将在 'tag' id div 中有一个价格标签的图像，然后是它下面的图像

编辑

我现在已经更新了这个，所以你可以有这样的东西，你可以在 div 中使用它的价格

Answer 3

目前尚不清楚您目前得到什么结果，除非它不起作用。所以也许你应该进一步指定问题。

对于仅在 CSS 中创建三角形，您可以查看这个 CSS 技巧，但它不允许将文本或样式添加到三角形：http ://css-tricks.com/snippets/css/css-triangle/

如果需要，您应该使用转换来获得类似的结果。