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