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!