Untitled

<body>
    <div class="avant">
        <div class="vignette_intervention_avant"><h2>AVANT intervention
            NCI</h2>
         </div>
    </div>

    <div class="apres">
        <div class="vignette_intervention_apres"><h2>APRÈS intervention NCI</h2></div>
    </div>

    <div class="main">
        <div class="left-side">
            <div class="logo">Logo NCI</div>
            <div class="left-text">
                <p>Urna molestie at elementum eu facilisis sed odio. Eu ultrices vitae auctor eu augue.Urna molestie at elementum eu facilisis sed odio. Eu ultrices vitae auctor eu augue.Urna molestie at elementum eu facilisis sed odio. Eu ultrices vitae auctor eu augue.Urna molestie at elementum eu facilisis sed odio. Eu ultrices vitae auctor eu augue.Urna molestie at elementum eu facilisis sed odio. Eu ultrices vitae auctor eu augue.
                </p>
                <p>Urna molestie at elementum eu facilisis sed odio. Eu ultrices vitae auctor eu augue.Urna molestie at elementum eu facilisis sed odio. Eu ultrices vitae auctor eu augue.Urna molestie at elementum eu facilisis sed odio. Eu ultrices vitae auctor eu augue.Urna molestie at elementum eu facilisis sed odio. Eu ultrices vitae auctor eu augue.
                </p>
                <p>Urna molestie at elementum eu facilisis sed odio. Eu ultrices vitae auctor eu augue.Urna molestie at elementum eu facilisis sed odio. Eu ultrices vitae auctor eu augue.Urna molestie at elementum eu facilisis sed odio. Eu ultrices vitae auctor eu augue.
                </p>
                <p>Urna molestie at elementum eu facilisis sed odio. Eu ultrices vitae auctor eu augue.Urna molestie at elementum eu facilisis sed odio. Eu ultrices vitae auctor eu augue.
                </p>
                <p>Urna molestie at elementum eu facilisis sed odio. Eu ultrices vitae auctor eu augue.
                </p>
                <p>Urna molestie at elementum eu facilisis sed odio. Eu ultrices vitae auctor eu augue.
                </p>
                <p>Urna molestie at elementum eu facilisis sed odio. Eu ultrices vitae auctor eu augue.Urna molestie at elementum eu facilisis sed odio. Eu ultrices vitae auctor eu augue.
                </p>
            </div>
        </div>

            <div class="right-side">
                <div class="right-text">
                <h2>Lorem ipsum</h2>
                                    <p>Urna molestie at elementum eu facilisis sed odio. Eu ultrices vitae auctor eu augue.Urna molestie at elementum eu facilisis sed odio. Eu ultrices vitae auctor eu augue.Urna molestie at elementum eu facilisis sed odio. Eu ultrices vitae auctor eu augue.Urna molestie at elementum eu facilisis sed odio. Eu ultrices vitae auctor eu augue.Urna molestie at elementum eu facilisis sed odio. Eu ultrices vitae auctor eu augue.
                </p>
                <p>Urna molestie at elementum eu facilisis sed odio. Eu ultrices vitae auctor eu augue.Urna molestie at elementum eu facilisis sed odio. Eu ultrices vitae auctor eu augue.Urna molestie at elementum eu facilisis sed odio. Eu ultrices vitae auctor eu augue.Urna molestie at elementum eu facilisis sed odio. Eu ultrices vitae auctor eu augue.
                </p>
                <p>Urna molestie at elementum eu facilisis sed odio. Eu ultrices vitae auctor eu augue.Urna molestie at elementum eu facilisis sed odio. Eu ultrices vitae auctor eu augue.Urna molestie at elementum eu facilisis sed odio. Eu ultrices vitae auctor eu augue.
                </p>
                <p>Urna molestie at elementum eu facilisis sed odio. Eu ultrices vitae auctor eu augue.Urna molestie at elementum eu facilisis sed odio. Eu ultrices vitae auctor eu augue.
                </p>
                <p>Urna molestie at elementum eu facilisis sed odio. Eu ultrices vitae auctor eu augue.
                </p>
                <p>Urna molestie at elementum eu facilisis sed odio. Eu ultrices vitae auctor eu augue.
                </p>
                <p>Urna molestie at elementum eu facilisis sed odio. Eu ultrices vitae auctor eu augue.Urna molestie at elementum eu facilisis sed odio. Eu ultrices vitae auctor eu augue.
                </p>
            </div>
        </div>
    </div>
</body>

@import url('https://fonts.googleapis.com/css?family=Fira+Sans:300,600');

h1, h2, h3, p {
    font-family: 'Fira Sans', sans-serif;
    font-weight: 300;
}

span {
    font-weight: 600;
}

.avant {
    background: url('../img/reseau-avant.jpg') no-repeat 50% 50%;
    height: 100vh;
    width: 50%;
    float: left;
}
.vignette_intervention_avant {
    background-color: #fff;
    -webkit-transform: skewX(-12deg);
    transform: skewX(-12deg);
    float: left;
    margin: 15px;
    height: 30px;
    width: 200px;
    margin-top: 350px;
}
.vignette_intervention_apres {
    background-color: #fff;
    -webkit-transform: skewX(-12deg);
    transform: skewX(-12deg);
    float: right;
    margin: 15px;
    height: 30px;
    width: 200px;
    margin-top: 350px;
}
.apres {
    background: url('../img/reseau-apres.jpg') no-repeat 50% 50%;
    height: 100vh;
    width: 50%;
    float: right;
}
.main {
    width: 800px;
    height: 100vh;
    margin: auto;
    border: none;
    position: relative;
}

.left-side {
    position: absolute;
    width: 33%;
    height: 300px;
    text-align: justify;
    top: -300px;
    left: 20px;
    border-bottom: 100vh solid white;
    border-left: 120px solid transparent;

}

.left-text {
    float: left;

}


.right-side {
    position: absolute;
    width: 33%;
    text-align: justify;
    right: 20px;
    border-top: 100vh solid white;
    border-right: 120px solid transparent;
    shape-outside: polygon(90% 0, 100% 0, 10% 100%, 0 100%);

}

.right-text {
    margin-top: -530px;
    float: left;
    shape-outside: polygon(90% 0, 100% 0, 10% 100%, 0 100%);

}