How to Make a Price Tag with CSS

Learn how to draw a clean, realistic CSS price tag with a clipped corner and a punch hole, no images required. Below are copy-and-paste techniques plus tips to center content inside the tag.

Live Preview: Price Tag

Method 1: Using clip-path + radial-gradient (pure CSS)

.price-tag {
  width: 160px;
  height: 100px;

  /* Tag fill with a real transparent punch hole (crisp edge, no halo) */
  background: radial-gradient(circle at 24px 24px, transparent 8px, #cd5454 8px);

  /* Cut the top-left corner at a 45° angle */
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%, 0 16px);

  /* Optional visual polish
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  */

  /* Center this block in a container */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Method 2: Using pseudo-elements (triangle corner + faux hole)

.price-tag-2 {
  width: 160px;
  height: 100px;
  background: #cd5454;
  position: relative;

  /* Center this block in a container */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Simulate a clipped top-left corner with a triangle that matches the page background */
.price-tag-2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0; 
  height: 0;
  border-top: 16px solid #ffffff;      /* set to your page background color */
  border-right: 16px solid transparent;
}

/* Faux punch hole (use the page background color for realism) */
.price-tag-2::after {
  content: "";
  position: absolute;
  top: 16px;      /* move as needed */
  left: 16px;     /* move as needed */
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;                  /* set to your page background color */
  /* Optional ring effect:
  box-shadow: 0 0 0 3px #cd5454 inset;
  */
}

How This Works

In Method 1, clip-path trims the element into a pentagon by cutting the top-left corner, while a radial-gradient paints the tag but leaves a transparent circle to mimic the string hole. Using equal-length color stops (transparent 8px, #cd5454 8px) creates a crisp, fully transparent hole with no halo or subpixel ring.

In Method 2, a pseudo-element triangle overlays the corner with the page’s background color to fake the clipped edge, and another pseudo-element draws a small circle. This is widely compatible and easy to tweak, but the “hole” is not truly transparent unless its color matches the page behind it.

How to Center Content Inside a Price Tag

The easiest way to center text, icons, or prices inside the tag is to use Flexbox or Grid on the tag element.

Method 1: Use CSS Flexbox

.price-tag {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical */
}

Method 2: Use CSS Grid

.price-tag {
  display: grid;
  place-items: center; /* centers both axes */
}

When to Use Each Shape Method

Use clip-path + radial-gradient when you want a true transparent hole and a reliable clipped corner over any background. Use the pseudo-element approach for broad browser support or when you need to avoid clip-path; just ensure the triangle and hole colors match the page background to look seamless.

Quick Customizations

Change the color by updating #cd5454 to your brand color, adjust the hole size by changing the 8px stop in the radial-gradient (e.g., 6px-10px), and modify the corner cut by tweaking the clip-path offset (e.g., 12px or 24px). Add depth with a soft box-shadow.

Need a thin stroke that follows the clipped shape? Outline won’t work because it hugs the element’s rectangular box. Instead, try one of these:

Option A: “Stroke” with a matching clipped pseudo-element

Because the ::before pseudo-element is enlarged with inset, increase its diagonal corner offsets by the stroke width so the cut aligns. For a 2px stroke around a 16px corner cut, use 18px.

.price-tag {
  position: relative;
  /* ...the rest of your .price-tag styles (including clip-path with 16px corner) ... */
}

/* Draw a 2px outer stroke that follows the same shape */
.price-tag::before {
  content: "";
  position: absolute;
  inset: -2px;                     /* stroke width */
  background: #222;                /* stroke color */
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%, 0 18px); /* 16px + 2px */
  z-index: -1;                     /* place behind the tag */
}

/* General rule:
   cornerOffsetInStroke = cornerOffset + strokeWidth
*/

Option B: Shape-outline via drop-shadow filter

/* Approximates a 1px outline around the alpha shape */
.price-tag {
  filter:
    drop-shadow(1px 0 0 #222)
    drop-shadow(-1px 0 0 #222)
    drop-shadow(0 1px 0 #222)
    drop-shadow(0 -1px 0 #222);
}

Accessibility & SEO

If the price tag is decorative only, add aria-hidden=”true”; if it conveys meaning, include accessible text (e.g., visually-hidden label) so screen readers understand it.