Home > Web Design > CSS-Only Triangles with Hover Effects

CSS-Only Triangles with Hover Effects

February 18, 2010

I was giddy when I saw this post about creating CSS triangles on Jon Rohan’s blog and quickly realized two things:

  1. I am officially a CSS geek.
  2. Because the code relies on creating a div with a height and width of 0, there is no way to create hover effects — which is fine if I’m using the triangles for a design element, but not as good if I’m using it for navigation.

Fortunately, there is a very easy fix (for #2, at least): wrap the element in an anchor tag.

The final code looks something like this:

<a class="css-arrow-multicolor" href="#">

.css-arrow-multicolor {
	display: block;
	width: 20px;
	height: 40px;
	overflow: hidden;

.css-arrow-multicolor span {
	border-color: transparent transparent transparent #000066;
	border-style: solid;
	border-width: 20px;
	dispay: block;
	width: 0;
	height: 0;

.css-arrow-multicolor:hover span {
	border-color: transparent transparent transparent #0000ff;

In this case I set the width of the containing <a> element to the same as the border width of the span, and the height of the <a> element to twice the border width of the span so that the <a> is exactly the size of the arrow. I set the overflow to hidden for the same reason.

Unfortunately I can’t show you an example of the triangle with its hover effects due to code limitations on free WordPress blogs, so you’ll either have to take my word for it or try it out yourself.

Edit 2013-04-30: Original code used a <div> instead of span, which is not good practice. Updated to use a span instead with styling set to display: block.

Categories: Web Design Tags: ,
  1. zeigfreid
    September 2, 2012 at 12:48 PM

    <a> is for anchors. Maybe consider adding the anchor tags with JS after the fact to keep things semantic?

    Edited by Michael on 2013-04-30: Escaped the HTML so the comment displays properly.

  1. No trackbacks yet.
Comments are closed.
%d bloggers like this: