css - 如何使用纯 CSS 创建对 Angular 线标题

Question

我们如何使用纯 CSS 创建对 Angular 标题线，如下图所示:-

Answer 1

通过使用 :after 伪元素和透明边框，这很容易。如果添加 :before 部分，甚至可以消除锯齿(当然，计算 50% 颜色是您的任务):

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