Creating arrows using CSS

Quite often you will need to insert small arrow icons into your website in order to create something like this:

This will often be handled by creating small png-icons – one for each state. Instead, I’ve decided to implement it by using CSS. This may sound a bit fanatic, but every time the server has to download something, the user interface becomes a bit less responsive. Every time I can substitute downloads with syntax I’ll improve the user experience.

I didn’t develop this code myself. I’m just using this blog to document my work. The original code originates from this blog: http://www.yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup.

/* Create arrow next to the tabs - thanks to http://www.yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/*/
article.tabs section:target h2:after {
	content: ' ';
	height: 0;
	position: absolute;
	width: 0;
	border: 15px solid transparent;
    border-left-color: #00B2E0;
	top: 20%;
	left: 100%;
}
/* Create arrow next to the tabs - thanks to http://www.yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/*/

To use this code snippet, you will need to know the following:

  • The size of the arrow is controlled by the border size. In the above it is 15 pixels. If you wanted a more “flat” arrow you could produce that by changing the dimensions, e.g. border-width: 37px 5px 37px 15px;
  • The direction of the arrow is controlled by the border-color. In the example above it says “border-left-color” which will produce an arrow pointing to the right. If you wanted an arrow pointing to the left, you would use “border-right-color” instead. And of course “border-top-color” and “border-bottom-color” produces arrows pointing down and up.

Finally, a word about browser compatibility. This snippet works in all modern browsers – including IE8. However, it doesn’t work in IE7, so in that case you would need to use the good old way.

I urge you to visit the above mentioned blog in order to learn more about how this code works.

Advertisements

One thought on “Creating arrows using CSS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s