Drawing the line: A simple cross-browser solution using HTML and CSS

This article descibes how to create arbitrary straight lines in a web page using HTML and CSS. The approach uses a single HTML element per line, with the angle of the line being determined by CSS. A JavaScript function is also provided which can be used to draw a straight line between the specified coordinates.

Background

Horizontal and vertical lines can be useful for separating different sections of a document or user interface and can be easily created using the CSS border property (or in the case of horizontal lines, the hr element). In some situations, however, there may be a requirement to display diagonal lines on a web page. Possible use cases include drawing a line graph or indicating a direction with an arrow.

Recent browsers make the task of drawing diagonal lines relatively straight forward. In fact, all that is required is to create a horizontal line of the desired length, rotate it, and then position it accordingly. Support for rotation of elements has been available in Internet Explorer since version 5.5, and has more recently become available in other mainstream browsers as a result of the proposed CSS 2D Transforms Module.

Solution

In browsers supporting the 2D Transforms Module, rotation can be achieved using the CSS transforms property as shown below.

					

	.diagonal
	{
		transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-o-transform: rotate(45deg);
	}

The above CSS will rotate any element with the class diagonal 45 degrees clockwise. Note that since the standard is not yet finalized, each browser prefixes the transforms property.

Internet Explorer does not yet support the transform property. However, it does provide a proprietary filter property that can achieve a similar result as shown below. 

					

	.diagonal
	{
		filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.707, M12=-0.707, M21=0.707, M22=0.707);
	}

Note that in general, for a clockwise rotation of alpha radians, M11=cos(alpha), M12=-sin(alpha), M21=sin(alpha) and M22=cos(alpha).

One complicating factor is that when the rotation is applied in IE, there is also a translation or shift in the element's position. The function below takes this into account, and can be used to draw a line connecting any two points.

	function createLine(x1, y1, x2, y2)
	{
		if (x2 < x1)
		{
			var temp = x1;
			x1 = x2;
			x2 = temp;
			temp = y1;
			y1 = y2;
			y2 = temp;
		}
		var line = document.createElement("div");
		line.className = "line";
		var length = Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2));
		line.style.width = length + "px";

		if (isIE)
		{
			line.style.top = (y2 > y1) ? y1 + "px" : y2 + "px";
			line.style.left = x1 + "px";
			var nCos = (x2-x1)/length;
			var nSin = (y2-y1)/length;
			line.style.filter = "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=" + nCos + ", M12=" + -1*nSin + ", M21=" + nSin + ", M22=" + nCos + ")";
		}
		else
		{
			var angle = Math.atan((y2-y1)/(x2-x1));
			line.style.top = y1 + 0.5*length*Math.sin(angle) + "px";
			line.style.left = x1 - 0.5*length*(1 - Math.cos(angle)) + "px";
			line.style.MozTransform = line.style.WebkitTransform = line.style.OTransform= "rotate(" + angle + "rad)";
		}
		return line;
	}

Demo

The following demo shows a set of lines produced using the createLine function. If you hover over a line you should see that the line change color.

Compatibility

Resources