html - 画像に合わせて拡大縮小されないクリップ パスを定義する方法

Question

私のウェブサイトにあるいくつかの画像の上に多角形を形成しようとしています。私の問題は、ポリゴンが常に同じ幅であるとは限らず、画像の幅に基づいていることです。私の問題を確認できる codepen を作成しました: http://codepen.io/doronsever/pen/bdyqYq。
これが私のsvgクリップパスを生成するコードです

<svg class="clip-svg" width="0" height="0">
  <defs>
    <clipPath id="clip-shape" clipPathUnits="objectBoundingBox" >
      <polygon points=".04,1, .04 .04, 0 0, 1 0, 1 1" />
    </clipPath>
  </defs>
</svg>

ご覧のとおり、左上の小さな三角形は両方の画像で同じサイズではありません。画像の幅に関係なく、常に同じサイズになるように制御するにはどうすればよいですか? FF サポートが必要なため、CSS クリップ パスを使用できません... 10x