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

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;
}

Answer 2

Check the DEMO

HTML

<div id="wrapper">
    <div id="blue"></div>
    <div id="white"></div>
    <div id="red"></div>
</div>

CSS

#wrapper {
    width:100%;
    min-height:50px;
}
#blue {
    width:70%;
    min-height:10px;
    background-color:turquoise;
    float:left;
}
#blue::after{

position:absolute;
content:"";
left:69%;    
width: 0;
height: 0;
border-style: solid;
border-width: 10px 50px 0 0;
border-color: turquoise transparent transparent transparent;

}
#white {
    width:10%;
    min-height:10px;
    background-color:#fff;
        float:left;
}
#red {
    width:20%;
    min-height:10px;
    background-color:#FF0000;
        float:left;
}
#red::before{
position:absolute;
content:"";
left:75%;    
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 10px 50px;
border-color: transparent transparent red transparent;

}