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; 

}