css - 純粋なCSSで斜めの見出し線を作成する方法

Question

以下の画像のように、純粋なCSSで斜めの見出し線を作成する方法：-

Answer 1

:after疑似要素と透明な境界線を使用することで、それは簡単です。パーツを追加すると、:beforeアンチエイリアシングも得られます（もちろん、50％の色を計算するのはあなたの仕事です）。

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

​&lt;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;
}

Answer 2

これが最も適切な例のようです（質問を更新する前に提供した画像は同じです）： 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;

}

デモ： -http: //jsbin.com/uhibub/edit#html,live