powered by Slim Framework
enhanced by Nesbot.com

CSS3: Creating Diagonal Lines

Published on Mar 19, 2012 by Jamie Munro

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.

Tags: css3 | CSS

<- MSSQL/MySQL: Delete Duplicate Rows in a Table  Home ASP.NET: Entity Framework's Code-First with an ObjectContext -> 
blog comments powered by Disqus