<ul class="container">
  <li>
    <div class="background" inert></div>
    <div class="foreground" tabindex="0"></div>
  </li>
  <li>
    <div class="background" inert></div>
    <div class="foreground" tabindex="0"></div>
  </li>
  <li>
    <div class="background" inert></div>
    <div class="foreground" tabindex="0"></div>
  </li>
</ul>
ul.container {
  width: 100vw;
  height: 500px;
  display: grid;
  --split-width: 25px; /* Width of divider line */
  
  list-style: none;
  padding: 0;
  
  > li {
    width: 100%;
    height: 100%;
    grid-area: 1 / 1;
    transition: clip-path 0.5s ease;
    display: grid;
    
    > * {
      grid-area: 1 / 1;
    }
  }
  
  /* When there's only 2 children */
  &:has(> :last-child:nth-child(2)) {
    /* Initial clip path */
    & > :nth-child(2) {
      clip-path: polygon(
        calc(50% - var(--split-width)) 100%,
        calc(50% + var(--split-width)) 0,
        100% 0,
        100% 100%
      );
    }
    
    /* First child hover */
    & > :nth-child(1):where(
      :hover,
      :focus,
      :focus-within,
      [aria-selected="true"],
    ) + * {
      clip-path: polygon(
        calc(100% - var(--split-width) * 4) 100%,
        calc(100% - var(--split-width) * 2) 0,
        100% 0,
        100% 100%
      );
    }
    
    /* Second child hover */
    & > :nth-child(2):where(
      :hover,
      :focus,
      :focus-within,
      [aria-selected="true"],
    ) {
      clip-path: polygon(
        calc(var(--split-width) * 2) 100%,
        calc(var(--split-width) * 4) 0,
        100% 0,
        100% 100%
      );
    }
  }
  
  
  
  /* When there's only 3 children */
  &:has(> :last-child:nth-child(3)) {
    /* Initial clip paths */
    & > :nth-child(2) {
      clip-path: polygon(
        calc(33% - var(--split-width)) 100%,
        calc(33% + var(--split-width)) 0,
        calc(66% + var(--split-width)) 0,
        calc(66% - var(--split-width)) 100%
      );
    }
    & > :nth-child(3) {
      clip-path: polygon(
        calc(66% - var(--split-width)) 100%,
        calc(66% + var(--split-width)) 0,
        100% 0,
        100% 100%
      );
    }
    
    /* First child hover */
    & > :nth-child(1):where(
      :hover,
      :focus,
      :focus-within,
      [aria-selected="true"],
    ) ~ :nth-child(2) {
      clip-path: polygon(
        calc(100% - var(--split-width) * 8) 100%,
        calc(100% - var(--split-width) * 6) 0,
        100% 0,
        100% 100%
      );
    }
    & > :nth-child(1):where(
      :hover,
      :focus,
      :focus-within,
      [aria-selected="true"],
    ) ~ :nth-child(3) {
      clip-path: polygon(
        calc(100% - var(--split-width) * 4) 100%,
        calc(100% - var(--split-width) * 2) 0,
        100% 0,
        100% 100%
      );
    }
    
    /* Second child hover */
    & > :nth-child(2):where(
      :hover,
      :focus,
      :focus-within,
      [aria-selected="true"],
    ) {
      clip-path: polygon(
        calc(var(--split-width) * 2) 100%,
        calc(var(--split-width) * 4) 0,
        100% 0,
        100% 100%
      );
    }
    & > :nth-child(2):where(
      :hover,
      :focus,
      :focus-within,
      [aria-selected="true"],
    ) ~ :nth-child(3) {
      clip-path: polygon(
        calc(100% - var(--split-width) * 4) 100%,
        calc(100% - var(--split-width) * 2) 0,
        100% 0,
        100% 100%
      );
    }
    
    /* Third child hover */
    &:has(:nth-child(3):where(
      :hover,
      :focus,
      :focus-within,
      [aria-selected="true"],
    )) > :nth-child(2) {
      clip-path: polygon(
        calc(var(--split-width) * 2) 100%,
        calc(var(--split-width) * 4) 0,
        100% 0,
        100% 100%
      );
    }
    & > :nth-child(3):where(
      :hover,
      :focus,
      :focus-within,
      [aria-selected="true"],
    ) {
      clip-path: polygon(
        calc(var(--split-width) * 6) 100%,
        calc(var(--split-width) * 8) 0,
        100% 0,
        100% 100%
      );
    }
  }
}


/* Demo styles */
html, body { height: 100%; }
body {
  margin: 0;
  background: black;
  display: grid;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
}

.container {
  > :nth-child(1) {
    background: blue;
  }
  > :nth-child(2) {
    background: teal;
  }
  > :nth-child(3) {
    background: rebeccapurple;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.