<div class="play"></div>

* {
  box-sizing:border-box;
}

body {
  background: #1D1F20;
}

.play {
  $size : 100px;
  
  width: $size;
  height: $size;
  position: relative;
  &:before, &:after {
    content: "";
    position: absolute;
    width: 0;
    border-style: solid;
    border-color: transparent;
    border-left-color: #fff;
    transition:.1s;
  }
  &:before {
    left: 0;
    top: 0;
    height: $size / 2;
    border-width: $size / 4 $size / 2 $size / 4 $size / 2;
  }
  &:after {
    left: $size / 2;
    top: $size / 4;
    height: 0;
    border-width: $size / 4 0 $size / 4 $size / 2;
  }
  &.paused {
    &:before {
      height: $size;
      border-width: 0 0 0 $size / 3;
    }
    &:after {
      left: $size / 1.5;
      top: 0;
      height: $size;
      border-width: 0 0 0 $size / 3;
    }
  }
}

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