CSS стиль горизонтальной линии

Question

Мне нужно, чтобы стиль горизонтальной линии <hr>, как прилагается. Есть ли способ сделать это с чистым css, который также будет работать в IE8?

Answer 1

EDIT: К сожалению, я пропустил ваше требование 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; 

}