CSS风格的水平线

Question

我需要设置水平线<hr>的样式，如附图所示。有没有办法用纯css做这个也适用于IE8？

Answer 1

编辑：对不起，我错过了你的IE8要求......这可能不会在那里工作。我道歉。我无权查阅。

你可以使用：before并创建一个框，旋转它，应用一些边框，绝对定位它，瞧，你有它：

http://jsfiddle.net/v7y1bp9s/1/

HTML：

<div class="container">
    <hr class="line"></hr>
</div>

CSS：

.container {
    float: left;
    width: 100%;
    height: 50px;
    background-color: #1978a4;
    line-height: 50px;
}
hr.line {
    border-color: #fff;
    position: relative;
}
hr.line:before {
     content: '';
     height: 10px;
     width: 10px;
     -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     -o-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
     position: absolute;
     left: 50px;
     border-bottom: 1px solid #fff;
     border-right: 1px solid #fff;
     background-color: #1978a4;
     top: -5px;

}