.play
  .pause

:before, :after {
  content: '';
  position: absolute;
  transition: .3s;
}

body {
  height: 100vh;
  margin: 0;
  background: #E62117;
  display: flex;
  align-items: center;
  justify-content: center;
}

.play {
  height: 200px;
  width: 200px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  &:before, &:after {
    background: #FFF;
    height: 100%;
    width: 51%;
    top: 0;
    will-change: transform;
    z-index: -1;
  }
  &:before { 
    left: 0;
  }
  &:after { 
    right: 0;
  }
  &.paused {
    &:before {
      transform: translateX(-25%);
    }
    &:after {
      transform: translateX(25%);
    }
    .pause {
      &:before, &:after {
        transform: rotate(0);
      }
    }
  }
}

.pause {
  &:before, &:after {
    height: 100%;
    width: 150%;
    background: #E62117;
    outline: 1px solid transparent;
  }
  &:before {
    top: -100%;
    transform-origin: 0% 100%;
    transform: rotate(26.5deg);
  }
  &:after {
    transform-origin: 0% 0%;
    transform: rotate(-26.5deg);
    top: 100%;
  }
}

// Take 1 here: https://codepen.io/koenigsegg1/pen/QNMJvP

$('.play').on('click', function () {
  $(this).toggleClass('paused');
});