CODEWITHSUNDEEP
htmlimagecss
Sowmya
Sowmya

Reputation: 26979

price tag on image

How do I get a price tag on image (with pure CSS) like how is in this attached image?

I used 

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;

but it didnt help!!

enter image description here

Upvotes: 0

Views: 4873

Answers (3)

Andrew Morris
Andrew Morris

Reputation: 1652

You can do something like this

Assuming you would have an image of the price tag in the 'tag' id div and then the image underneath it

EDIT

I've updated this now so you can have something like this Where you can have the price in the div with it

Upvotes: 4

Ana
Ana

Reputation: 37179

Try something like this http://jsfiddle.net/chriscoyier/xtCb9/1/

Upvotes: 5

Erwin
Erwin

Reputation: 402

It is not clear what results you currently get, except that it doesn't work. So maybe you should specifiy the problem further.

For creating triangles in CSS-only, you could look at this CSS-trick, but it doesn't allow for text or styles added to the triangle: http://css-tricks.com/snippets/css/css-triangle/

If you want that, you should use transforms to get a similar result.

Upvotes: 1

Related Questions