At some point, most developers have needed to implement some sort of arrow into a design, whether it is to navigate through content or to act as a simple pointer.
Whilst these arrows are relatively easy to implement using only CSS, nowadays designers seem to be using hairline thickness arrows, similar to the arrows depicted below. I myself have had to implement several designs in the past few months that utilized them; previously, I have been using simple transparent background images to achieve this, but I feel as though they could easily be implemented using only CSS, and would therefore be much more flexible.
Image may be NSFW.
Clik here to view.
Hairline arrows are minimalistic, and look great when placed on top of a button. My solution uses pure CSS with graceful fallbacks for IE6/7/8. I have also created a simple page that allows you to quickly render your own, which is here.
Lets take a look at how these arrows are created using simple CSS. Depicted below is the layout of the arrow element itself. The blue rectangle represents the perimeter of the element, whilst the dashed lines represent the position and rotation of the pseudo elements within the element. Determining the correct angle and the length of the black lines is a matter of using Pythagorean Theorem and Trigonometry.
Image may be NSFW.
Clik here to view.
We need only ever calculate one half of the arrow, and then simply inverse the values to determine the other half. As detailed in the diagram below, it is possible to determine the length of h and Θ using only the desired width and height, w and h respectively.
Image may be NSFW.
Clik here to view.
Determining h is a matter of using Pythagorean Theorem; as the line meets in the middle, we must first half the dimensions so that the angle and length of h meet in the middle. Such that h = √ (w² + h²). The script I created translates this formula into Javascript, in-order to determine the length of the hypotenuse for desired width and height of the arrow.
var h = Math.sqrt((half_w * half_w) + (half_h * half_h));
Now that the length of the hypotenuse has been determined, we must next calculate the angle of the arrow, so that both diagonal lines will meet in the middle. The formula to determine the angle in Radians is tan(Θ) = w / h. In-order to use this angle in CSS, it first needs to be transformed into Degrees. My script translates this formula into Javascript and handles converting the resulting value into Degrees.
var theta = Math.atan(half_w / half_h) * 180 / Math.PI
Because the effect uses both the before and after pseudo elements, creating the effect within earlier versions of Internet Explorer is difficult. Whilst Internet Explorer 8 supports pseudo elements and has the capability to rotate elements using the filter css property, it is unable to rotate pseudo elements due to the fact that they have no layout.
In-order to create a reliable fallback for early versions of Internet Explorer, my script creates a small canvas element and converts this to a base64 encoded inline image. The result simply swaps out any pseudo elements and replaces them with a transparent background. The difficulty with this solution arises when IE6 & IE7 are taken into consideration, these browsers do not support inline images, but instead can use MHTML inline images.
My solution renders hairline arrows created using only CSS. Creating the arrows in this manner, enables them to be easily animated or modified (even though at the moment, only Firefox supports animations for pseudo elements). Furthermore, the arrow classes adopt a static inline background image for earlier versions of Internet Explorer. Although images cannot be progressively transformed, they can be altered to ‘jump’ between both end states of any desired animation, a graceful fallback for an otherwise complex element.
You can create custom CSS for hairline arrows using my generator, here: http://davidkelley.me/scripts/hairline-arrows/