请考虑以下情况。
https://jsfiddle.net/Twisty/jzeo4xsm/82/

JavaScript

$(function() {
  function makeClip(width, height, mid) {
    //left, top
    var half = 50;
    var coords = [
      [0, 0],
      [mid + half, 0],
      [mid - half, height],
      [0, height]
    ];
    return coords;
  }

  function setClipStyle(target, left) {
    var coords = makeClip($(target).width(), $(target).height(), left);
    console.log(coords);
    var parts = [];
    parts.push(coords[0][0] + "px " + coords[0][1] + "px");
    parts.push(coords[1][0] + "px " + coords[1][1] + "px");
    parts.push(coords[2][0] + "px " + coords[2][1] + "px");
    parts.push(coords[3][0] + "px " + coords[3][1] + "px");

    var style = 'polygon(' + parts.join(",") + ')';
    console.log(style);
    $(target).data("mid", left).css("clipPath", style);
  }

  setClipStyle(".img-over img", 300);
  $(".slide-handle").draggable({
    axis: "x",
    containment: [-20,0,580,0],
    drag: function(e, ui) {
      setClipStyle(".img-over img", ui.position.left + 30);
    }
  });
});

这将使用clip-path操作Image的CSS。您需要检查浏览器兼容性。我还使用了jQuery UI来更容易地处理拖动操作。
参考文献：

• https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
• https://api.jqueryui.com/draggable/
• https://css-tricks.com/almanac/properties/c/clip-path/