Photoshop Question posted in
The official user guide can be found here.

How can I diagonally split a line separator into two colors? – Photoshop

I have some simple graphics in Photoshop (just a styled line). But I am very confused on how to re-create it using CSS and HTML. The graphics are:

First Line

and

Second Line

I want to use them as a top border, bottom border, and maybe separator line.

Tags:

2

Answers


  1. 0

    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;
    
}
    Login or Signup to reply.
  2. 0

    DEMO:
    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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search