Creating Diagonal Lines with CSS

Using the CSS Transform Property

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

<div></div>
<hr />

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

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;
}

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.

Published on Mar 18, 2019

Tags: The Ultimate CSS Tutorial for Beginner Programmers