0

I need to make div which consist of two divs (one white one black look at picture) but i am unable to do it.

enter image description here

smarber
  • 4,829
  • 7
  • 37
  • 78
  • Possible duplicate of [Shape oblique bottom border of a div](https://stackoverflow.com/questions/23976084/shape-oblique-bottom-border-of-a-div) – smarber Jan 21 '18 at 12:52
  • Possible duplicate of [How do I achieve a slanted right-edge div?](https://stackoverflow.com/questions/44710868/how-do-i-achieve-a-slanted-right-edge-div) – Sebastian Simon Jan 21 '18 at 12:52
  • And [Create a slanted edge to a div](https://stackoverflow.com/q/29410329/4642212). – Sebastian Simon Jan 21 '18 at 12:53

1 Answers1

0

html

<div></div>

css

div{
    height:100%;
    position:relative;
    overflow:hidden;
}
div:before{
    content:'';
    position:absolute;
    top:0; right:0;
    width:100%; height:100%;
    background-color: rgba(90, 74, 199, .8);
    border-right:40px solid rgba(173, 96, 223, .8);

    -webkit-transform-origin:100% 100%;
    -ms-transform-origin:100% 100%;
    transform-origin:100% 100%;

    -webkit-transform:skewX(30deg);
    -ms-transform:skewX(30deg);
    transform:skewX(25deg);
}


/******  FOR THE DEMO  *******/

html, body{
    background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg);
    background-size:cover;
    margin:0;padding:0;
    height:100%;
}