<ul class="container">
  <li>
    <div class="background" inert></div>
    <div class="foreground"></div>
  </li>
  <li>
    <div class="background" inert></div>
    <div class="foreground"></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;
    }
  }
  
  /* 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):hover + * {
    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):hover {
    clip-path: polygon(
      calc(var(--split-width) * 2) 100%,
      calc(var(--split-width) * 4) 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;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.