Creating Diagonal Lines with CSS 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:

<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

Related Posts

Did you enjoy this article? If you did here are some more articles that I thought you will enjoy as they are very similar to the article that you just finished reading.


Learn how to code in HTML, CSS, JavaScript, Python, Ruby, PHP, Java, C#, SQL, and more.

No matter the programming language you're looking to learn, I've hopefully compiled an incredible set of tutorials for you to learn; whether you are beginner or an expert, there is something for everyone to learn. Each topic I go in-depth and provide many examples throughout. I can't wait for you to dig in and improve your skillset with any of the tutorials below.