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:

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.