Separate 2 div's with slope line

Question

i want to seperate 2 floating div\'s with a slope line, they got different background colors.

Example here:

Answer 1

you can use pseudo element :after or :before

CODEPEN

.rect {
            background:#000;
            height: 50px;
            width: 150px;
            position: relative;
            overflow: hidden;
        }
        .rect:after {
            content: "";
            background:#333;
            height: 100px;
            width: 300px;
            -moz-transform: rotate(-45deg); 
            -ms-transform: rotate(-45deg); 
            -webkit-transform: rotate(-45deg); 
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
            display: block;
            position: absolute;
            top:-7px;
            right: 10px;

        }