JSFiddle - React, Tailwind, and code Playground

HTML

<div class="section">
    <div class="section--body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga odit,
        consectetur et pariatur natus esse nulla suscipit corporis quidem soluta
        corrupti commodi. Perferendis quis, nihil delectus facere rerum porro ea!
    </div>
</div>

CSS

.section {
    max-width: 700px;
    
    overflow: hidden;
    margin: auto;
    
    position: relative;
    z-index: 1;
    
    background: #222 url(http://www.sunhome.ru/i/wallpapers/61/pozitivnie-kartinki.orig.jpg) 50%;
    background-size: cover;
}

.section--body {
    width: 50%;
    
    box-sizing: border-box;
    position: relative;
    padding: 60px;
    
    background: #fff;
}

.section--body:after {
    content: "";
    
    position: absolute;
    top: 0;      left: -9999px;
    bottom: 0;   right: 0;
    
    z-index: -1;
    
    background: #fff;
    
    transform: skew(20deg, 0);
    transform-origin: 0 0;
}