Css i Transform

pytanie zadane 25 czerwca 2018 w HTML i CSS przez grands14320 Obywatel (1,080 p.)

Witam.

Od kilku godzin próbuje na różne sposoby uzyskać w CSS efekt taki jak na obrazku

ale ciągle div nr.3 (obrazek 3) układa się nieprawidłowo.Nie proszę o gotowe rozwiązanie a jedynie o wskazówkę jak osiągnąć pożądany efekt.

Mój kod:

HTML

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head> 
    <body>
        <div class="container">           
            <div class="div1" >           
                <P> 1 </P>            
            </div>
            <div class="div2">
                <P> 2 </P>          
            </div>
            <div class="div3">             
                <P> 3 </P>          
            </div>
        </div>
    </body>
</html>

CSS

body{
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.container{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}

.container div.div1
{ 
    width:43%;
    height: 100%;
    background-color: aqua;
    transform-origin:top right;
    transform: skewX(-13deg);

}

.container div.div2
{

    width:33%;
    height: 100%;
    background-color: black;
    transform-origin:top right;
    transform: skewX(-13deg);

}

.container div.div3
{
    width:30%;
    height: 100%;
    background-color: orange;
    transform-origin:bottom left;
    transform: skewX(-13deg);    
}

p{
    text-align: center;
    position: relative;
    top: 300px;
    color: aliceblue;
}