Skip to main content

Create a price tag shape with CSS

Published on 17th February 2013

When I designed this site I wanted the list of tags for each article to look like price tags.

To create this look you can break it down into 3 easy sections.

  1. The rectangle
  2. The triangle
  3. The circle

We are going to use CSS, a couple of CSS3 properties and the pseudo elements :before and :after.

view demo

The basic markup

I have a view setup in Drupal which outputs the tags as a simple unordered list.

<ul class="demo-tags">
  <li><a href="#">tag 1</a></li>
  <li><a href="#">tag 2</a></li>
  <li><a href="#">tag 3</a></li>

Now we add some basic styling. For the unordered list we set margin, padding and remove the bullet points. For the list items we float them next to each other, ensure the height is set, add margin to space them correctly and set the position to relative (this is because we will be positioning the circle absolute).

.demo-tags {
  margin: 1em 0;
  padding: 0;
  list-style-type: none;
  display: inline-block;
.demo-tags li {
  float: left;
  height: 60px;
  line-height: 60px;
  position: relative;
  margin: 0 1em 0.6em 0;

The rectangle

This is the main shape of our price tag. We give the anchor tags a background colour and set the text colour and size. We also remove the default anchor tag underline (text-decoration: none;) and add some padding. I didn't want the price tag to look 'square' so I added rounded corners (border-radius) to the bottom and top left side of the rectangle. Check out border-radius in my recommended CSS3 generators blog post.

.demo-tags a {
  background: #fea500;
  color: #fff;
  font-size: 18px;
  font-size: 1.8rem;
  text-decoration: none;
  -webkit-border-top-left-radius: 6px;
  -webkit-border-bottom-left-radius: 6px;
  -moz-border-radius-topleft: 6px;
  -moz-border-radius-bottomleft: 6px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  padding: 18px 20px;

The triangle

To add the triangle we use an :after pseudo-element. We create the triangle shape by using the border property. Check out my CSS triangles blog post to learn how to create them in more detail. We set the border property to half the height of the list items and float the triangle to the right of our rectangle.

.demo-tags a:after {
  content: "";
  float: right;
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-left: 30px solid #fea500;
  border-bottom: 30px solid transparent;

The circle

To add the circle/hole we use a :before pseudo-element. We make a square and add a border-radius value of half the height and width or 50% to make it a circle. Its important to set the background colour to the same as your body background colour/image to give it the illusion its a hole. We then add box-shadow to give it some depth (See my CSS3 generator post). We position it 'absolute' in the correct place.

.demo-tags a:before {
  content: "";
  position: absolute;
  top: 27px;
  right: 14px;
  width: 8px;
  height: 8px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  background: #8ec6b9;
  -moz-box-shadow: -1px -1px 1px #424444;
  -webkit-box-shadow: -1px -1px 1px #424444;
  box-shadow: -1px -1px 1px #424444;

Finally we add a :hover state for the anchor tags

.demo-tags a:hover {
  background: #ff4500;
.demo-tags a:hover:after {
  border-color: transparent transparent transparent #ff4500;

view demo