Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to Create Diagonal Heading Line with Pure CSS

How to Create Diagonal Heading Line with Pure CSS

Problem

how we can create a Diagonal Heading line with pure CSS like mentioned below image :-

Problem courtesy of: Shailender Arora

Solution

it seems the most appropriate example (the image you provided before you updated your question is the same):
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-diagonal-lines-with-css/

HTML

Rohit AZAD

CSS

a {

  padding:10px;
  text-decoration:none;
  color:white;
  height:0;
  line-height:50px;
  display:inline-block;
  font-weight:bold;
  border-right:30px solid transparent;
  border-bottom:30px solid blue;

}

demo :- http://jsbin.com/uhibub/edit#html,live

Solution courtesy of: fcalderan

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How to Create Diagonal Heading Line with Pure CSS

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×