For the recent irama.org realignment I wanted to emulate the cute little ‘tags’ that sit below a track on SoundCloud.
I wanted to try to do as much as possible using CSS alone—without background images, too many extra elements, or general hackery. Ideally, the markup would be:
<a href="…">Tag text</a>
There are lots of posts around the interwebs about CSS triangles, but it’s hard to find a concise tutorial for putting an arrowhead on the end of a box. So I started by pinching borrowing a technique Ben pulled together for a site we were working on.
I noticed the negative margins were not playing nicely with iOS so I switched to relative positioning to offset the arrowhead. This also simplifies the padding/margin calculations, makings the final solution easier to tweak.
.tags a { float: left; background: #c5c5c5; color: #fff; text-decoration: none; margin: 0 0 10px 18px; padding: 2px 10px 1px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; position: relative; transition: all .25s linear; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); white-space: nowrap; line-height: 21px; } .tags a:before { content: ""; border-style: solid; border-color: transparent #c5c5c5 transparent transparent; border-width: 12px 13px 12px 0; position: absolute; left: -13px; top: 0; transition: all .25s linear; }
Hover states need to cover the anchor background and the triangular border colour…
.tags a:hover { background-color: #39F; } .tags a:hover:before { border-color: transparent #39F transparent transparent; }
For the ‘hole’ punched in the tag, I thought I’d have to rely on a background image. Ben made a good point about reusing the bullet from a list item (which worked, with some negative margin trickery).
I finally thought to check the approach that soundcloud actually take and I was pleasantly surprised… clean minimal markup and a CSS-only solution!
Why didn’t I check their implementation sooner??
In the end, I borrowed their approach for the hole…
.tags a:after { background: none repeat scroll 0 0 #FFFFFF; border-radius: 50% 50% 50% 50%; box-shadow: 0 1px 1px #737373 inset; content: ""; height: 5px; left: -1px; position: absolute; top: 10px; width: 5px; }
Which ends up looking like this…
Hats off to the designers and front end devs at soundcloud, they know what they are doing!