JSFiddle - React, Tailwind, and code Playground

HTML

<div class="section section--color-blue">
  <div class="section__slider">Тут слайдер 1</div>
</div>

<div class="section section--color-purple">
  <div class="section__slider">Тут слайдер 2</div>
</div>

<div class="section section--color-blue">
  <div class="section__slider">Тут слайдер 3</div>
</div>

<div class="section section--color-purple">
  <div class="section__slider">Тут слайдер 4</div>
</div>

SCSS

.section {
  $self: &;
  $clip-height: 50px; // высота скоса
  
  padding: #{$clip-height} 0;
  position: relative;
  // вычитаем высоту скоса из координат
  -webkit-clip-path: polygon(0 calc(0% + #{$clip-height}),100% 0,100% calc(100% - #{$clip-height}),0% 100%);
  clip-path: polygon(0 calc(0% + #{$clip-height}),100% 0,100% calc(100% - #{$clip-height}),0% 100%);
  
  &:before,
  &:after {
    content: "#{$clip-height}";
    position: absolute;
    left: 0;
    width: 100%;
    height: #{$clip-height};
    display: flex;
    align-items: center;
    color: #fff;
    padding: 0 15px;
    font-size: .5em;
    opacity: .5;
    letter-spacing: 1px;
  }

  &:before {
    top: 0;
    justify-content: flex-end;
  }

  &:after {
    justify-content: flex-start;
  }
  
  & + #{$self} {
    margin-top: -#{$clip-height}; // вычитаем высоту скоса, чтобы совмещать секции друг с другом
  }
  
  @at-root #{$self}__slider {
    margin: 15px 0; // делаем отсутп от верхних границ
    background: rgba(255, 255, 255, 0.2);
    height: 100px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  
  // Цвета
  @at-root #{$self}--color-blue {
    background: #005aff;
  }
  
  @at-root #{$self}--color-purple {
    background: #673AB7;
  }
  
}

body {
  margin: 0;
  font-family: sans-serif;
}

*, *:before, *:after {
  box-sizing: border-box;
}