Notch Chip
Chip with a triangular notch cut into the left edge using clip-path — a real shape, not a background trick. Reads as a luggage tag or boarding-pass entry.
Notch Chip the 6th of 20 designs in the 20 CSS Tags & Chips Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<a href="#" class="ctc-notch"> <span class="ctc-notch-hole" aria-hidden="true"></span> <span class="ctc-notch-text">FIRST CLASS</span> </a>
.ctc-notch {
position: relative;
display: inline-flex;
align-items: center;
gap: 12px;
padding: 10px 18px 10px 28px;
background: #ffd479;
color: #0a0a0a;
font:
700 11px/1 ui-monospace,
monospace;
letter-spacing: 0.16em;
text-decoration: none;
clip-path: polygon(12px 0%, 100% 0%, 100% 100%, 12px 100%, 0% 50%);
transition:
transform 0.25s ease,
background 0.25s ease;
}
.ctc-notch-hole {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.6);
flex-shrink: 0;
}
.ctc-notch:hover {
transform: translateX(2px);
background: #ffe4a3;
}