1. Code
  2. HTML & CSS

How to Create Diagonal Lines with CSS

Read Time:4 minsLanguages:

A few days ago, I received my invite to Google Music. While browsing the app, I noticed a tiny, but neat trick they use to create tabs and diagonal borders with plain-old CSS. I'll show you how to do the same in your projects today!

Prefer a Video Tutorial?

Step 1: The Markup

We begin with some simple markup.

We'll keep this demo as simple as we possibly can.

bare markupbare markupbare markup

Step 2

Next, only for the layout, let's apply a background color and a bit of spacing to the body element.


Step 3

Now, we'll style the anchor tag somewhat -- apply a new color, make it bold, add some borders, etc.

Style the anchor tagStyle the anchor tagStyle the anchor tag

Notice how, when you set large border widths, at the point the two intersect, it creates a diagonal line? I wonder if we can use that intersection as a tab edge? Let's try reducing the height to zero.

Zero heightZero heightZero height

Getting closer! Maybe if we now adjust the line-height of the anchor tag, we can make the text fit into that box!

Adjusting the line heightAdjusting the line heightAdjusting the line height

Step 4

We're getting there! But, certainly, we don't need that ugly red border on the right. Is there a way to specify that it should receive the body's background color without restating the hex value? Yep! We use the transparent keyword for this purpose.

Transparent BordersTransparent BordersTransparent Borders

Step 5

The obvious issue, at this point, is that it looks a bit odd, when the background stretches for the entire width of the container. The natural instinct might be to update the display to inline. However, as the image below shows, that won't work.

display inlinedisplay inlinedisplay inline

We need the element to retain its block-like nature in order for it to honor the 0 height. The answer to this dilemma is to use display: inline-block;, or to float the anchor tag, and then clear the elements that follow it. We'll use the former.

Much better!

Step 6

Lastly, let's style the div below it a bit, and we'll be just about finished!

Uh ohUh ohUh oh
In Safari
In Firefox

Uh oh. We have a problem. It looks like Firefox and Webkit don't exactly agree on how to render elements with zero heights and displays of inline-block.

On a casual note, this one had me a bit stumped. Without resorting to hacks, I couldn't get Firefox and Chrome to render the layout exactly. If you find a way, let me know in the comments! Update - refer to the comments for a work-around.

Step 7

There are ways to target Webkit browsers with CSS, but it's important for me to note that tricks like this should only be used in situations of last resort. In other words, don't try this at home kiddos (unless you have to). In our situation, it appears that it would be smarter to use floats to accomplish this layout. Nonetheless, let's be dangerous and experiment with some alternate techniques.

Many aren't aware that media queries can be used to target Webkit browsers. Watch what happens when we use a webkit-specific property as the condition for the media query...

Ta da! It works. Remember though - only reach for this trick if you have no other option!

Final Product

Final ProductFinal ProductFinal Product

It's a simple enough technique, but, nonetheless, one we should all have in our tool belts. Have you used any neat tricks like this in your projects? Let me know in the comments!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.