Scalable CSS arrows

Sep 03 2005

Here’s a seemingly simple problem that I’d been wrestling with on-and-off for a few weeks, and two fantastic solutions developed by the artist Anton Peck – on the greatest social network of them all, the Joshuaink mailing list.

The problem

On a project I’m currently coding on, the design comps required that the ‘call to action’ (that’s marketing speak for the widget that you want people to click on…) was enclosed in an arrow; simplicity itself if we used a graphic, but being the accessibility perfectionist that I am, I decided that only scalable text was good enough and set out to find a CSS solution to the problem.

After several abortive attempts involving relative positioning, absolute positioning, negative margins, nested spans and just about every other CSS trick I could think of… I gave up and asked someone else to do it.

But not just anyone – I turned to The List. ;)

Scalable CSS arrow #1

The first solution that Anton created used a large arrowhead image as the background of our link, positioned on the far-right of the block so that as the font-size increases, the point of the arrow remains flush to the right-hand edge:

.arrowShape {
   background: #fff url(arrowBG.png) no-repeat right 50%;
   margin: 0;
   padding: 0;
   float: left;
}

The link itself cleverly uses a top and bottom border the same colour as the page background to mask the areas immediately above and below the link text, creating the illusion of a normal arrow shape:

.arrowShape a {
   display: block;
   border: 1em solid #FFF;
   border-right-width: 0;
   border-left-width: 0;
   margin-right: 3em;
   padding: .3em 0 .3em .6em;
   text-align: center;
   font: bold .7em Arial, Helvetica, sans-serif;
   color: #F1F1F1;
   text-decoration: none;
}

You can view the final effect here – try scaling the text in your browser up and down to see how the arrow scales along with the text.

Scalable CSS arrow #2

Not content with one solution to the problem, Anton developed an alternative arrow as well – this one encloses the link text in a box with one pointed end. It uses a similar border technique, but this time combines a 1px border with a thin arrowhead graphic to create the effect:

.arrowShape {
   background: #fff url(arrowBG2.png) no-repeat right 50%;
   margin: 0;
   padding: 0;
   float: left;
}
.arrowShape a {
   display: block;
   border: 1px solid #363;
   border-right-width: 0;
   padding: .3em .6em .3em .6em;
   margin-right: 1.1em;
   font: bold .7em Arial, Helvetica, sans-serif;
   color: #363;
   text-decoration: none;
}

View the final effect here – again, scale your text to see how well it works.

Summary

Two perfect solutions to a problem, developed with the bare minimum of extra markup, all within the space of an hour of asking for help – ain’t the internet great?

Don’t forget to check out Anton’s site as well – there’s not a lot there at the moment, but I’m sure we’ll see more of his illustrations around the place soon.

Scalable CSS arrows

The problem

Scalable CSS arrow #1

Scalable CSS arrow #2

Summary

Comments

Search the site