Webistrate - Draw Your Own Conclusions

CSS3: Creating Diagonal Lines

Posted by Jamie Munro | March 19, 2012 | Tags:

Share

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.

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.

Summary

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.

Share


Related Posts

Leave a Reply

You must be logged in to post a comment.

Buy one of my books