Diagonal Lines with CSS

Original: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-diagonal-lines-with-css/

by Alexey Demin

HTML

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

CSS

body {  
    background: #e3e3e3;  
    font-family: sans-serif;  
    width: 400px;  
    margin: 100px auto;  
}
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;
}
div {
 border: 1px solid #4c4c4c;
 border-top: 3px solid #4c4c4c;
 padding: 20px;
}
/* Firefox and Webkit don’t exactly agree on how to render elements with zero heights and displays of inline-block */
@media screen and (-webkit-animation) { a { margin-bottom: -4px; } }