How to draw diagonal lines with css [duplicate]

Answer 1

You could also use two elements and theirs borders like that :

The HTML :

The CSS :

.top-left {
    position: absolute;
    top: 0;
    left: 0;
    height: 28px;
    width: 28px;
    border-top: solid 2px #fff;
    border-left: solid 2px #fff;
}

.cross-a, .cross-b {
    position:absolute;
    width:0;
    height:0;
}

.cross-a {
    top:  -2px;
    left: -2px;
    border-top:   28px solid transparent;
    border-right: 28px solid #000;
}

.cross-b {
    top:  0px;
    left: 0px;
    border-top:   26px solid transparent;
    border-right: 26px solid #FFFFFF;
}

The fiddle : http://jsfiddle.net/9yK6q/7/