css很短的水平线,CSS风格水平线

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

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

HTML：

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;

}