如何将线分隔符对角分割为两种颜色？

Question

我在Photoshop中有一些简单的图形(只是一个样式线).但我对如何使用CSS和HTML重新创建它感到困惑.图形是:

和

我想将它们用作顶部边框,底部边框和分隔线.

Answer 1

演示:http: //jsfiddle.net/1bvoze13/

HTML:

<div class="separator"></div>

CSS:

div.separator
{
    height:10px;
    position:relative;
    background:#FF1F47;
}

div.separator::before, div.separator::after
{
    content:'';
    border:solid;
    border-width:0 0 10px 10px;
    border-color:transparent;
    border-bottom-color:red;
    width:50px;
    position:absolute;
    top:0;
}

div.separator::before
{
    border-bottom-color:white;
    right:10px;
}

div.separator::after
{
    border-bottom-color:#1BB4DA;
    right:0;
}