Create a price tag using CSS

Before I write anything, I should tell you that I am not a CSS and HTML expert. But I love good CSS and HTML and hate IE and “table for everything” concept. Today morning I started with two small web applications, CSS Border Radius Generator and CSS3 Generator. I knew (and used) about this property before, and also I started falling in love with CSS border radius at the first sight. And I don’t know why, but I used to think that I can create a Price Tag like structure with it. When I saw these two websites today morning, I thought to explore the beauty of CSS Border Radius.

First I played with Border Radius providing different values for the property. Increasing after a certain value, I realized that it does not change the shape of the box. I wanted to know what’s the maximum value allowed for this property. Similar to the font weight property, where it varies between 100 and 1000. And when I checked w3.org, I came to know more about the border radius property. There I came to know about elliptical border radius. Then I thought, “Oh!! I got it. Now I can create the price tag structure using CSS border radius.”. Soon I realized that it’s never possible to crate a price tag structure using CSS border radius property.

Then I searched whether someone has wrote about how to create a price tag like structure in CSS. But I did not find any. However some people were taking about creating custom HTML tags using CSS. Then I thought, let’s divide the price tag into two parts; one is the triangular part (where we see a hole to pass the thread) and the rectangular part, where we write the price. Creating the rectangular shape is easy and everyone do this everyday. Even if you don’t know CSS, you can easily create a rectangular shape using tables. But remember, the table is not here for to act as a rectangle. Then I felt like I have read some blog on creating triangular shapes using CSS around a year ago. I searched for how to create a triangular shape using CSS and landed on this nice blog. Oh! yes. This is the concept I have read before.

So I got the triangle with the following code:


And the outcome is:

Now for the rectangular shaped part, I need to know the height of the triangle-shaped object. You can use any tool to find out the height of the object. But I thought I can use trigonometry which I have learned in class 9th to get the height of the triangle-shaped object. While checking about Sine, Cosine, Tangent etc. I realized that I don’t need trigonometry to know the height of the object. I just need a bit of commonsense and logic. As the height and width of the object is 0, and border width is 100px, the height and width of the object including border width will be double of the border width, i.e. 200px. So I created the rectangular shape part of the price tag.

Now it’s the time to keep them side by side. The triangle-shaped part to the left and the rectangular shaped part to the right, and they should touch each other. So I made the triangular part to float left and the rectangular part to float right. Placed both inside a container and set the width of the container the sum of width of both the parts. And the final code is:


And it looks like:

I did not able to use display property as inline for the divs or to use spans instead of divs (as display property of span is inline). The triangle shape concept does not work with inline display. Why, I have not investigated yet.

So now, you may like to put the price within it. I will not tell you more. You can do anything you want to do inside the rectangular shaped box. You can also to make a hole in the triangle-shaped part using my beloved CSS border radius property.

So my final price tag code will be:


$999

And it looks like this:

$999

Do you like this? Are you creating similar objects for you project? Please let me know. I will be very happy to know what you think about this and how you have used or modified this. I have sent around 2 hours on this experiment and around 3 hours to write this post. So please let me know your views on this.

I was thinking to create a similar shaped object without using any image for one of my dream projects. But today I realized this will not be helpful, instead I should go for Gmail label type objects.

Update: If you are reading this post in a feed reader, then please read this post on the website/browser. Codes and examples are not being displayed on feed readers like Google Reader.

Update: Here is some code shared by Sandeep: http://jsfiddle.net/9EEEP/5/ . This works well too.

Update: This link of an article on CSS Globe is shared by Neo in a comment. It was written 5 days before I wrote this post. It also uses pseudo elements to cut-down the markup as the link I shared above. You should read it. Thank you Neo for sharing it here.


Posted

in

by

Comments

15 responses to “Create a price tag using CSS”

  1. Janmejay Pati Avatar
    Janmejay Pati

    In IE it looks something different.

    1. Debiprasad Avatar

      IE (up to IE 8 ) does not support CSS Rounded Corners. It should on IE 9 though.

  2. Abhilash Sahoo Avatar

    We can’t use it till people don’t stop using IE less than 9.

    1. Debiprasad Avatar

      You can use this, if you know your users.

      See this: http://jsfiddle.net/9EEEP/5/

      1. Norik Davtian Avatar

        I love this trick better, it does not add extra markup to the html code.
        Thanks for sharing it.

  3. Guru Sanket Biswal Avatar

    Niceeeee trick ๐Ÿ˜€

  4. Soumendra Jena Avatar

    There are lots of workaround to get everything working on IE.

    Though IE sucks, we dont care about it, as long as it gets through ๐Ÿ˜‰

  5. Neo Avatar

    You could also pseudo elements to cut down on the markup:

    http://cssglobe.com/post/9435/pure-css3-post-tags

  6. Umair Avatar

    can we tilt is so that i looks more realistic, like hanging.

    1. Debiprasad Avatar

      Yes. You can do this using CSS3.

  7. Anand Avatar
    Anand

    how to reduce its size ?

    1. Debiprasad Avatar

      Size of what do you want to reduce?

  8. sami Avatar
    sami

    how to reduce size of whole div

    1. Debiprasad Avatar

      You can control the size with the CSS.

  9. Andrew Strauss Avatar
    Andrew Strauss

    thanks its good, helps me a lot ๐Ÿ™‚

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.