Diagonal Lines in CSS

Return to blog

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

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.

Diagonal Lines in CSS. Visible 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.

12 Responses to “Diagonal Lines in CSS”

  1. williammauriciogiraldo@hotmail.com Says:
    August 9th, 2007 at 4:57

    Hi!!!, this is some wonder, i don’t know this, aaahhhh, excuseme my BAD english.

  2. matt Says:
    August 15th, 2007 at 6:30

    thanks for the info. how’d you figure this one out?

  3. oktavio Says:
    August 27th, 2007 at 9:05

    thanks

  4. xAirbusDriver Says:
    September 1st, 2007 at 17:37

    Had me going there, for a while. The right aligned sample text made me think this technique was causing the seemingly ‘diagonal’ left border. :-)

    Here’s another way (not invented by me, of course!) to make the ‘diagonals’ and make the text flow between them. ;-)

  5. xAirbusDriver Says:
    September 1st, 2007 at 17:39

    Guess I don’t know the ‘code’ for inserting a link. [blush] Here’s the link that should have been inserted in my first post. [headbash]

    http://meyerweb.com/eric/css/edge/slantastic/demo.html

  6. anonymous Says:
    October 6th, 2007 at 3:14

    excellent tuorial:)

  7. » Desenhando com CSS #1 - Diagonais- Web Bem Feita - Usabilidade, Acessibilidade & Afins Says:
    October 8th, 2007 at 6:46

    […] Four Shapes h? um artigo sobre essa t?cnica de linhas diagonais via CSS, r?pido e […]

  8. herzengel Says:
    October 8th, 2007 at 8:29

    Well I try to change the angle of the diagonal line… nice CSS workout!

  9. Vishal Says:
    January 25th, 2008 at 22:00

    Hi Again,
    Greta job,
    But it is possible in table based design too.

    For example.
    As already known, table have 4 out line.
    Just increase the border size, and convert the other 3 there border to white and remain on border color to black,
    You able to see, same as css.

    Thanks,
    Vishal
    vishalgaurav01@gmail.com
    http://vishal.benetonfilms.com

  10. Vishal Says:
    January 25th, 2008 at 22:57

    Hi again,
    I am also published my table based design on my website
    http://vishal.benetonfilms.com/table

    Thanks,
    Vishal
    vishalgaurav01@gmail.com
    http://vishal.benetonfilms.com

  11. Vishal Says:
    February 9th, 2008 at 11:06

    Hi,
    One tip for new web masters.
    Css design is always good idea.
    First not all time. Css based design have browser compatibility problems.
    For like

    is displayed on a red horizontal line in IE, but in opera web browser, only Grey horizontal line displayed.

    Some of users are uses opera, some of them are uses Firefox. Please must be sure about layout and out put in other browser.
    And oh yes,Now days safari web browser is also very popular, Safari web browser visual look is very great.

    Thanks,
    Vishal
    vishalgaurav01@gmail.com
    http://vishal.benetonfilms.com

  12. feby Says:
    April 3rd, 2008 at 19:40

    Very Very Great!!!

    Thanks.

Leave a Reply

Back to top ^