JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<div class="header-home">
    <div class="inner">
      
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac diam ante. Mauris dictum arcu velit, sed pellentesque enim lobortis in. Suspendisse sed lectus vel libero interdum egestas. Praesent finibus, purus eu venenatis pulvinar, eros
          justo posuere tellus, vitae laoreet nunc tortor at urna. Vivamus vitae ipsum vel magna interdum cursus vitae id urna. Pellentesque malesuada nibh in ipsum dignissim fermentum. Etiam venenatis sem vulputate magna euismod, in semper elit fringilla.
          Integer luctus in lacus eu tempor. Sed maximus metus lectus, vitae dictum nulla porttitor quis. Phasellus et urna ac est posuere convallis. Nulla facilisi. Vivamus pulvinar porttitor ligula, a iaculis augue imperdiet id. Maecenas suscipit eros
          nec vulputate suscipit.</p>
    </div>
    
</div>
    
<div class="foo">
  <div class="bar">
    <div class="media">
      <img src="//i.imgur.com/Tjx20gp.png" alt="" class="media-item">
      <div class="media-body">
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac diam ante. Mauris dictum arcu velit, sed pellentesque enim lobortis in. Suspendisse sed lectus vel libero interdum egestas. Praesent finibus, purus eu venenatis pulvinar, eros
          justo posuere tellus, vitae laoreet nunc tortor at urna. Vivamus vitae ipsum vel magna interdum cursus vitae id urna. Pellentesque malesuada nibh in ipsum dignissim fermentum. Etiam venenatis sem vulputate magna euismod, in semper elit fringilla.
          Integer luctus in lacus eu tempor. Sed maximus metus lectus, vitae dictum nulla porttitor quis. Phasellus et urna ac est posuere convallis. Nulla facilisi. Vivamus pulvinar porttitor ligula, a iaculis augue imperdiet id. Maecenas suscipit eros
          nec vulputate suscipit. </p>
      </div>
    </div>
  </div>
</div>

SCSS

$triangle-width:1600px;
$triangle-height:160px;

.header-home {position:relative; z-index:0; background-color:tomato;
  // On place le triangle en bas de notre encart
  &:after {content:""; position:relative; z-index:2; display:block; padding-bottom:percentage($triangle-height/$triangle-width); height:0; background-image:url('data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%20160%22%20preserveAspectRatio%3D%22none%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3CclipPath%20id%3D%22cut-off%22%3E%0A%20%20%20%20%20%3Cpolygon%20points%3D%220%2C0%200%2C1600%201600%2C160%22%2F%3E%0A%20%20%20%20%3C%2FclipPath%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cpolygon%20fill%3D%22white%22%20stroke%3D%22white%22%20stroke-width%3D%2210%22%20points%3D%220%2C0%200%2C1600%201600%2C160%20%22%20clip-path%3D%22url%28%23cut-off%29%22%20%2F%3E%0A%3C%2Fsvg%3E'); background-repeat:no-repeat; background-size:100% 100%;}
}
// cet encart permet de spécifier une hauteur si besoin
.inner {border:5px solid red; min-height:300px; max-width:500px; margin:0 auto;}

// Utilisé pour la couleur de fond de la page
.foo {background-color:white;} 
  // On décale le contenu vers le haut avec le même ratio que le triangle
  .bar {position: relative; z-index:1; margin-top:percentage(-$triangle-height/$triangle-width);
    // On décale le contenu intérieur de la moitié de la hauteur du ratio de notre triangle
    &:before {content:""; display:block; padding-bottom:percentage(($triangle-height/2)/$triangle-width); height:0; background-color:rgba(0,0,0,0.2);}
  }

// L'important ici est que ce conteneur est centré
.media {position: relative; max-width:($triangle-width/2); margin:0 auto; background-color:rgba(255, 255, 0, 0.5);}
  
  // On décale l'image vers le haut avec pour valeur la moitié de notre décalage intérieur (qui représente déjà la moitié de la hauteur du ratio)
  // On obtient donc la hauteur du ratio divisée par 4. On ajoute ensuite...