How to Create Diagonal Heading Line with Pure CSS

问题

how we can create a diagonal heading line with pure CSS like mentioned below image :-

回答1:

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

<a href="#">Rohit AZAD</a>

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

回答2:

By using the :after pseudoelement and transparent borders, it's easy. If you add the :before part, you even get anti-aliasing (of course it is your task to calculate the 50% color):

http://jsbin.com/ejomav/3/edit#javascript,html,live

​<div>New Music</div>
<div>Old Music</div>

div {
    float: left;
    margin-right: 2.5em;
    line-height: 2em;
    width: 110px;
    position: relative;
    font-family: sans-serif;
    font-weight: bold;
    color: white;
    background: black;
}
div:after {
    content: ' ';
    display: block;
    position: absolute;
    width: 0px;
    height: 0px;
    top: 0;
    right:        -2em;
    border:        1em solid transparent;
    border-bottom: 1em solid black;
    border-left:   1em solid black;
}

div:before {
    content: ' ';
    display: block;
    position: absolute;
    width:  0px;
    height: 0px;
    top:    0px;
    margin-right: -1px;
    right:        -2em;
    border:        1em solid transparent;
    border-bottom: 1em solid #8080FF;
    border-left:   1em solid #8080FF;
}

来源：https://stackoverflow.com/questions/11242262/how-to-create-diagonal-heading-line-with-pure-css