JSFiddle - React, Tailwind, and code Playground

by Kulgar

HTML

<div class="container">
    <div id="myDiv">
    </div>
    
    <p>
        Du text personnalisable.
        <br />
        Pour recréer ceci : http://www.metacodex.net/ADVENIS/advenis-res-Contenu-institutionnel-2015-07.html - juste en CSS
    </p>
    
    <img src="http://yoannexpliquelavie.fr/wp-content/uploads/2015/02/univers.jpg" />
</div>

CSS

.container{
    position: relative;
    width: 500px;
}

div#myDiv {
    -ms-transform:skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg); /* Standard syntax */
    width: 250px;
    overflow: hidden;
    border-right: 3px solid red;
    z-index: 2;
    position: relative;
    background: white;
    height: 225px;
}

p{
    position: absolute;
    top: 25px;
    z-index: 3;
    max-width: 230px;
    word-wrap: break-word;
}

img {
    width: 300px;
    z-index: 1;
    top: 0;
    position: absolute;
    right: 0;
}