/* =======  updated:23-12-2015==========*/
/*============== My Custom Design =========*/
/**========================== for up arrow ZigZag Border #FFFFFF and #242424 ********/

/* just put this div at your target place:
--------------------------------------------

   <div class="zigzag-saw-arrow"></div>



*/
.zigzag-saw-arrow{
color:#FFFFFF;
background-color:#FFFFFF;
text-align:center;
}
.zigzag-saw-arrow:after {
content: " ";
    display:block;
    position: relative;
top:0px;left:0px;
    width:100%;
    height:36px;
    background: linear-gradient(#FFFFFF 0%, transparent 0%), linear-gradient(135deg, #242424 33.33%, transparent 33.33%) 0 0%, #242424 linear-gradient(45deg, #242424 33.33%, #FFFFFF 33.33%) 0 0%;
    background: -webkit-linear-gradient(#FFFFFF 0%, transparent 0%), -webkit-linear-gradient(135deg, #242424 33.33%, transparent 33.33%) 0 0%, #242424 -webkit-linear-gradient(45deg, #242424 33.33%, #FFFFFF 33.33%) 0 0%;
    background: -o-linear-gradient(#FFFFFF 0%, transparent 0%), -o-linear-gradient(135deg, #242424 33.33%, transparent 33.33%) 0 0%, #242424 -o-linear-gradient(45deg, #242424 33.33%, #FFFFFF 33.33%) 0 0%;
    background: -moz-linear-gradient(#FFFFFF 0%, transparent 0%), -moz-linear-gradient(135deg, #242424 33.33%, transparent 33.33%) 0 0%, #242424 -moz-linear-gradient(45deg, #242424 33.33%, #FFFFFF 33.33%) 0 0%;
    background-repeat: repeat-x;
    background-size: 0px 100%, 20px 27px, 20px 27px;
    }

/****** END for up arrow Border ********/

/* ========================================for twin color background of a div -*/
.twin-color{
    background-color:red;
    position:relative;
}
.twin-color:before{
    position:absolute;
    content:"";
    width:100%;
    height:50%;
    background-color:green;
    left:0px;
    top:0px;
    opacity:1;
}
/*============== END My Custom Design =========*/