CSS风格水平线

Question

我需要风格水平线<hr>像附图所示。有没有什么办法可以做到这一点与纯CSS，这也将在IE8中工作？

Answer 1

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

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

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; 

}