css 台形に画像をトリミング

Question

最新ブラウザのみでいいのですが、
画像を台形にトリミングしたいのですが、
IEもできる方法わかりませんでしょうか？
clip-pathやsvgなどでやっていたのですが、IEだけどうしても対応できず・・・
border-left:4px solid transparent;
などでそのように見せることはできるのですが、
できれば、ちゃんとトリミングを行いたいです。

Answer 1

skew()でやる方法もありますね

<div class="trapezoid w">
  <div class="trapezoid c">
    <img src="https://placehold.jp/300x200.png">
  </div>
</div>

.trapezoid,
.trapezoid >img{
  display: inline-block;
  transform-origin: 0 100%;
  overflow: hidden;
}
.trapezoid.w{
  transform: skew(-15deg);
}
.trapezoid.c{
  transform: skew(30deg);
}
.trapezoid >img{
  transform: skew(-17deg);/*歪み修正のため，-2deg*/
}

<div class="trapezoid">
    <img src="https://placehold.jp/300x200.png">
</div>

.trapezoid,
.trapezoid >img{
  display: inline-block;
  transform-origin: 0 100%;
  overflow: hidden;
}
.trapezoid{
  transform: skew(15deg);
}
.trapezoid >img{
  transform: skew(-15deg);/*こちらは歪みなしのようなのでそのまま*/
}

Win8, IE 11, Firefox 61で確認

---

• 画像をCSSで斜めにマスクした時の知見
• コピペで簡単 CSS で要素を傾斜変形させる方法
• CSS3のtransformで要素を斜めにしたり平行四辺形に画像をトリミング

Comments

[cheche0830]

ご連絡遅くなりましてすいません！
試してみます！

Answer 2

SVGのpolylineとclipPathで、こんな感じでどうでしょう？
VirtualBoxですが、Win7 IE11で確認済みです。

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <clipPath id="cut-off-bottom">
      <polyline points="0,0 100,0 150,100 0,100" stroke="black" stroke-width="1" fill="none" />
    </clipPath>
    <image width="150" height="150" xlink:href="https://placehold.jp/150x150.png"  clip-path="url(#cut-off-bottom)" ></image>
  </svg>

サンプル

Comments

[cheche0830]

ご連絡遅くなりましてすいません！
試してみます！

[cheche0830]

すいません、こちらクリップするパスを％で指定することはできないでしょうか・・・

[kszk311]

%とは？画像のサイズがバラバラなのでしょうか…？

[cheche0830]

あ、すいませんよくわかってないのですが、
image widthが150pxなので、pointsも150だとおもうのですが、
imageをレスポンシブにした場合、pointsも150の部分を100%などと指定しないといけないのではないでしょうか？

[kszk311]

％の指定はできないようですね。
相対的に出したいのなら、このコードを、JSなどでサイズを引数に出力すればできると思いますので、それでやってみるとどうでしょうか？

[cheche0830]

ありがとうございました！やってみます！