<span id="play-button-container">
  <span class="play-button play-button-before"></span>
  <span class="play-button play-button-after"></span>
</span>

  html, body {
    height: 100%;
  }
  body {
    background: #009688;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #play-button-container {
    display: inline-block;
    width: 50px;
    height: 50px;
    cursor: pointer;
  }
 .play-button {
    display: inline-block;
    position: absolute;
    width: 50px;
    height: 50px;
    background: #fff;
    transition: clip-path .3s ease;
  }
  .play-button-before {
    clip-path: polygon(0 0, 50% 25%, 50% 75%, 0% 100%);
  }
  .play-button-after {
    clip-path: polygon(50% 25%, 100% 50%, 100% 50%, 50% 75%);
  }
  #play-button-container:hover .play-button-before {
    clip-path: polygon(0 0, 30% 0, 30% 100%, 0% 100%);
  }
  #play-button-container:hover .play-button-after{
    clip-path: polygon(70% 0, 100% 0, 100% 100%, 70% 100%)
  }