Diagonal line in CSS

Using css styling to substitute for an image, is an effective way for developing sites efficiently. Which not only saves time and bandwidth, but also allows more flexibility when adjusting designs.

By using a border technique, we can create the effect of diagonal lines with some simple code.

Here’s what we want to achieve:

First we’ll create the box, in html, for the header and the diagonal line to sit in:

<div class="box"><h1>Diagonal Lines in CSS</h1></div>

Next we’ll give the box a width, ensuring the border is kept small:

.box { width:150px; text-align:right;/*move the text to the right*/ }

Finally we’ll create the diagonal effect by creating two borders:

.box h1 { border-left:10px solid #fff; /*same as page colour*/ border-bottom:10px solid #000; /*black, bottom, border*/ font-size:18px; color:#000; /*black text*/}

While the left border is still there, the appearance of invisibility is created by using the same colour as the background.

The below image demonstrates the actual outline of the invisible border.

The explanation of this effect is when the black, bottom, border pushes against the invisible (white) border, the the diagonal edge is created.

Browser compatibility
You maybe wondering why we can’t use the colour ‘transparent’ on the left-border, instead of white, so that the background colour or image, would show through. Unfortunately ‘transparent’ inherits the black, ‘color:#000;’ property, in Internet explorer.

Also another display problem will occur, with IE5/win, if the box or header doesn’t have a width. The simple fix is to give the header a layout value (haslayout) by using the holly hack to specify a height, as shown below.

/* For IE5-Win Hides from IE5-mac */ html .box h1 {height: 1%;} /* End hide from IE5-mac */

A few extra notes
If a limited width box isn’t used and you only want the border to expand the width of the heading, add to the ‘h1′ element ‘ display:inline;’.

There you have it; and here’s another diagonal border example to give you an idea of what not to do.

This entry was posted on Tuesday, July 11th, 2006 at 18:35 and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.