Advertisement
HTML & CSS

How to Create Diagonal Lines with CSS

by

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?

Choose 720p for the best clarity.
Subscribe to our YouTube and Blip.tv channels to watch more screencasts.

Step 1: The Markup

We begin with some simple markup.


<!DOCTYPE html> 
 
<html lang="en"> 
<head> 
   <meta charset="utf-8"> 
   <title>Demo</title> 
</head> 
<body> 
	<a href="#">New Music</a> 
	<div> 
		<h3> Hello, Everyone! </h3> 
		<p> 
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</p> 
	</div> 
</body> 
</html>

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

bare markup

Step 2

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

body {
	background: #e3e3e3;
	font-family: sans-serif;
	width: 400px;
	margin: 100px auto;
}
Spacing

Step 3

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

a {
	padding: 10px;
	text-decoration: none;
	color: white;
	font-weight: bold;
	display: block;
	
	border-right: 30px solid red;
	border-bottom: 30px solid #4c4c4c; 
}
Style 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.

a {
	padding: 10px;
	text-decoration: none;
	color: white;
	font-weight: bold;
	display: block;
	
	border-right: 30px solid red;
	border-bottom: 30px solid #4c4c4c;

   height: 0;
}
Zero height

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

a {
	padding: 10px;
	text-decoration: none;
	color: white;
	font-weight: bold;
	display: block;
	
	border-right: 30px solid red;
	border-bottom: 30px solid #4c4c4c; 
	
	height: 0;
	line-height: 50px;
}
Adjusting 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.

a {
	padding: 10px;
	text-decoration: none;
	color: white;
	font-weight: bold;
	display: block;
	
	border-right: 30px solid transparent;
	border-bottom: 30px solid #4c4c4c; 
	
	height: 0;
	line-height: 50px;
}
Transparent 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 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.

a {
	padding: 10px;
	text-decoration: none;
	color: white;
	font-weight: bold;
	display: inline-block;
	
	border-right: 30px solid transparent;
	border-bottom: 30px solid #4c4c4c; 
	
	height: 0;
	line-height: 50px;
}

Much better!


Step 6

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

div {
	 border: 1px solid #4c4c4c;	
	 border-top: 3px solid #4c4c4c;	   	 
	 padding: 20px;
}
Uh 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...

@media screen and (-webkit-animation) {
	a {
		margin-bottom: -4px;
	}
}

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


Final Product

Final 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!

Related Posts
  • Web Design
    Complete Websites
    Building the Responsive Timeline Portfolio PagePortfolio thumb
    During this tutorial we will be building the fantastic Timeline Portfolio as seen in an earlier tutorial by Tomas Laurinavicius. We will be using some responsive techniques as well as CSS3 animations, Sass and a little bit of jQuery.Read More…
  • Web Design
    HTML/CSS
    Finishing Off the Merry Christmas Web App InterfaceXmas build 1 retina
    In this tutorial we will finish off our web app front-end so it all looks perfect and functions nicely on all screen sizes. Last time, we rounded off by styling the message boxes, leaving just the content left to do. Shall we dive right in? Ok!Read More…
  • Web Design
    HTML/CSS
    Building the Merry Christmas Web App InterfaceXmas build 2 retina
    Today we're going to build the Merry Christmas Web App Interface; a Photoshop layout from an earlier tutorial by Tomas Laurinavicius.Read More…
  • Web Design
    Email
    Creating a Simple Responsive HTML EmailEmail new rwd thumb
    In this tutorial I will show you how to create a simple responsive HTML email which will work in every email client, including all the new smartphone mail clients and apps. It uses minimal media queries and a fluid width approach to ensure maximum compatibility.Read More…
  • Web Design
    CMS
    Uber Aesthetics and ResponsivenessGhost rwd retina
    Welcome to the final part of our Ghost theme design tutorial series! In the previous two parts of this series we worked on the first half of styling our theme and laid the groundwork for responsive behavior. This fifth and final part finalizes our styling and completes the task of making our theme fully responsive.Read More…
  • Web Design
    HTML/CSS
    Build an HTML Email Template From ScratchEmail build thumb
    The best way to understand any process is to carry it out yourself, from the ground up. Today, we're going to do just that with email design, by building an HTML email template from scratch.Read More…