Post and price tags using CSS3

You can create post and price tags using CSS3 and place them into your blog, ecommerce website or any other kind of website. This is a rather simple CSS trick which uses :before and :after pseudo-elements to draw triangle and circle in post and price tags we are creating here.

Post and price tags using CSS3

View Demo

I am using tags class to apply common CSS rules to both type of tags along with :before and :after pseudo-elements as well as price-tag and post-tag classes to achieve desired styling (triangle/circle on the left or right).

HTML

It’s quite simple.

CSS

1. .tags a – We are defining CSS rules for anchor styling.
2. .tags a:before – We have applied zero top edge to absolute positioned :before pseudo-element and width, height set to zero and a solid border style. Later we will supply left/right positioning and border width & color depending upon where we wish to triangle appear.
3. .tags a:after – This will act as that rounded hole. What we’re doing here is creating an empty square, and rounding it’s edges so we create a circle with position: absolute and of course we will position it on either left or right later in this article.

Here are some points that will sure help you to understand the concept and modify the rules to style the tags in your own way:

• The height and line-height of anchor tag should be same to vertical align the text inside tags properly and you can increase/decrease the size using these two.
• The left/right position and three sided border of triangle with :before pseudo-element are always equal to half of the height (mentioned in price-tag a:before pseudo-element later).
• Top edge of hole = (height of tag – height of hole) / 2
• Left/right edge of hole = (-) width of hole /  2

Price Tags

You can change the radius of border and to give top-right and bottom-right corner sharp look, comment out the first CSS rule in the code just above.

Post Tags

Same as the above we are adding post-tag class to have circle and triangle appear to the right side of the anchor tag box.

And in the last as in our DEMO we are applying hover color on tags so add the following CSS:

In this way you can create left pointing or right pointing price tags as well as I tried to clear the concept behind post and price tags using CSS3 so that you can alter the CSS to obtain desired styling and size.