<ul role="tablist" class="slidey with-text">
  <li role="tab" tabindex="0">
    <div class="background" inert>
      <video muted autoplay loop src="https://videos.pexels.com/video-files/6138108/6138108-uhd_2560_1440_25fps.mp4">Source: https://www.pexels.com/video/using-a-strainer-to-loosen-flour-powder-6138108/</video>
    </div>
    <div class="foreground">
      <div class="fg_content"></div>
    </div>
  </li>
  <li role="tab" tabindex="0">
    <div class="background" inert>
      <video muted autoplay loop src="https://videos.pexels.com/video-files/7236816/7236816-hd_1920_1080_30fps.mp4">Source: https://www.pexels.com/video/throwing-powder-on-a-flat-surface-7236816/</video>
    </div>
    <div class="foreground">
      <div class="fg_content"></div>
    </div>
  </li>
  <li role="tab" tabindex="0">
    <div class="background" inert>
      <video muted autoplay loop src="https://videos.pexels.com/video-files/3769033/3769033-hd_1920_1080_25fps.mp4">Source: https://www.pexels.com/video/person-pouring-sauce-on-food-3769033/</video>
    </div>
    <div class="foreground">
      <div class="fg_content"></div>
    </div>
  </li>
  <li role="tab" tabindex="0">
    <div class="background" inert>
      <video muted autoplay loop src="https://videos.pexels.com/video-files/5657049/5657049-uhd_2732_1440_30fps.mp4">Source: https://www.pexels.com/video/person-cutting-parsley-leaves-3191888/</video>
    </div>
    <div class="foreground">
      <div class="fg_content"></div>
    </div>
  </li>
  <li role="tab" tabindex="0">
    <div class="background" inert>
      <video muted autoplay loop src="https://videos.pexels.com/video-files/3191888/3191888-uhd_2560_1440_25fps.mp4">Source: https://www.pexels.com/video/artistic-food-presentation-on-a-wooden-board-5657049/</video>
    </div>
    <div class="foreground">
      <div class="fg_content"></div>
    </div>
  </li>
</ul>

@import url('https://fonts.googleapis.com/css2?family=Asul:wght@700&display=swap');
// Variables to control the effect
// This effect requires a fair chunk of compiled CSS so probably limit the number of sections to the number that you will have
$min_sections: 5; // The minimum number of content sections you're going to have; 2 is min
$max_sections: 5; // The maximum number of content sections you're going to have
$split_width: 30px; // Sizes the angle and min width of each content section
$background_color: black;
$text_slide_distance: 30px;

// The main slidey code
ul.slidey {
  --height: 500px;
  width: 100%;
  height: var(--height);
  display: grid;
  
  list-style: none;
  padding: 0;
  
  > li {
    position: relative;
    grid-area: 1 / 1;
    transition: clip-path 0.5s ease;
  }
  
  .background {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
  
  .foreground {
    position: relative;
  }
  
  @for $num_sections from $min_sections to ($max_sections + 1) {
    $ns1: $num_sections + 1; // Number of sections + 1, used in calculations
    $pps: 100% / $num_sections; // Percent per section

    &:has(> :last-child:nth-child(#{$num_sections})) {
      // Initial styles
      @for $i from 2 to $ns1 {
        & > :nth-child(#{$i}) {
          // Initial clip paths
          clip-path: polygon(
            calc(#{($i - 1) * $pps} - #{$split_width}) 100%,
            calc(#{($i - 1) * $pps} + #{$split_width}) 0,
            100% 0,
            100% 100%
          );
        }
      }

      // Target effects
      @for $i from 1 to $ns1 {
        @for $j from 1 to $ns1 {
          &:has(li:nth-child(#{$i}):where(
            :hover,
            :focus,
            :focus-within,
            [aria-selected="true"], // For potential JS-driven effects
          )) > :nth-child(#{$j}) {
            $num_left: $j - 1;
            $num_right: $num_sections - $j;
            
            // Is or is to the left of the targeted item
            @if $j <= $i {
              @if $j != 1 {
                $base_num: $num_left * 2;
                clip-path: polygon(
                  #{($base_num + 0) * $split_width} 100%,
                  #{($base_num + 2) * $split_width} 0,
                  100% 0,
                  100% 100%
                );
              }
            }
            // Is to the right of the targeted item
            @else if $j > $i {
              $base_num: $num_right * 2;
              clip-path: polygon(
                calc(100% - #{($base_num + 4) * $split_width}) 100%,
                calc(100% - #{($base_num + 2) * $split_width}) 0,
                100% 0,
                100% 100%
              );
            }
          }
        }
      }
    }
  }
}


// Demo styles
html, body { height: 100%; margin: 0; }
body {
  display: flex;
  align-items: center;
  background: $background_color;
}

.background {
  video {
    width: 100%;
    height: var(--height);
    object-fit: cover;
  }
}

.slidey {
  > :nth-child(1) {
    background: blue;
  }
  > :nth-child(2) {
    background: teal;
  }
  > :nth-child(3) {
    background: rebeccapurple;
  }
  > :nth-child(4) {
    background: orange;
  }
  > :nth-child(5) {
    background: green;
  }
}