JSFiddle - React, Tailwind, and code Playground

by Wosley Bago

HTML

<section id="latest_news">
  <div class="skewing_mixin">
    <div class="image-container image-container-col-2 first">
      <div class="container">  
      <!-- content goes here -->
     
      </div>
      <div class="image-container-split-container">
        <div class="image-container-split">
        </div>
        <div class="image-container-split">
        </div>
      </div>
    </div>
  </div>
  
  <div class="skewing_mixin">
    <div class="image-container image-container-col-2 second">
      <div class="container">  
      <!-- content goes here -->
     
      </div>
      <div class="image-container-split-container">
        <div class="image-container-split">
        </div>
        <div class="image-container-split">
        </div>
      </div>
    </div>
  </div>
</section>

SCSS

div.skewing_mixin{
  .image-container {
    position: relative;
    width: 100%;
    height: 331px;
    padding: 40px 20px;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-flow: wrap column;
    align-items: center;
    justify-content: center;
      &:before {
        content: '';
        position: absolute;
        z-index: -4;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }
  }

  .image-container.image-container-col-2 .image-container-split:nth-child(odd) {
    left: 0;
    right: 50%;
  }
  .image-container.image-container-col-2 .image-container-split:nth-child(even) {
    left: 50%;
    right: 0;
  }
  .image-container-split {
    position: absolute;
    z-index: -3;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    border: 20px solid transparent;
    border-bottom-color: #fff;
    padding-bottom: 20px;
    display: flex;
    flex-direction: wrap column;
    align-items: center;
    justify-content: center;
  }

  .image-container-split:first-child {
    border-left: none;
    padding-left: 20px;
  }
  .image-container-split:last-child {
    border-right: none;
    padding-right: 20px;
  }
  .image-container-split:before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -20px;
    border: 10px solid #fff;
    border-bottom-color: transparent;
  }
  .image-container-split:nth-child(odd):before {
    right: -20px;
    border-left-color: transparent;
  }
  .image-container-split:nth-child(even):before {
    left: -20px;
    border-right-color: transparent;
  }
  .image-container-split:after {
    content: '';
    position: absolute;
    z-index: -3;
    top: -20px;
    left: 0;
    right: 0;
    bottom: -20px;
    opacity: 0.5;
    border: 20px solid transparent;
    border-bottom-color: #fff;
  }
  .image-container-split:first-child:after {
    border-left: none;
  }
  .image-container-split:last-child:after {
    border-right: none;
  }
 ...