Creating Diagonal Lines with CSS

The hr tag has been around for quite some time to provide a nice horizontal line to visually separate content. To achieve a vertical line, it’s typically been accomplished via border-left or border-right. However, this is when you can get into height issues or columns that don’t extend the whole way, etc… Instead CSS3 allows for the rotation of elements and allow for vertical or diagonal lines to be created with some basic CSS. This is accomplished with the transform property.

Using the CSS Transform Property

Let’s start with some basic HTML that I will rotate after with CSS:

[code]
<div></div>

<hr />
[/code]

Now that the HTML is done, I am going to add some CSS that will separate rotate the hr and div tags:

[code]
div {
border-top: 1px solid #000;
-moz-transform: rotate(7.5deg);
-o-transform: rotate(7.5deg);
-webkit-transform: rotate(7.5deg);
-ms-transform: rotate(7.5deg);
transform: rotate(7.5deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod=’auto expand’, M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104);
-ms-filter: “progid:DXImageTransform.Microsoft.Matrix(M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104,sizingMethod=’auto expand’)”;

zoom: 1;
}

hr {
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);

zoom: 1;
}
[/code]

In the above CSS, the div tag is being rotated by 7.5 degrees while the hr tag is being rotated a full 90 degrees.

As we saw in some previous CSS3 examples (CSS3: Rotating DOM Elements or CSS3: Creating a Transparent Background), our CSS is unfortunately more complicated because we need to apply the filter to each of the various browsers instead of one common attribute.

By applying a CSS3 rotation to an hr tag, we can easily achieve a vertical rule instead of a horizontal rule. Or by applying a lesser degree, we can achieve a variety of diagonal lines as well.