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

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

行動規範の内容に同意します

回答2件

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

html
1<div class="trapezoid w">
2  <div class="trapezoid c">
3    <img src="https://placehold.jp/300x200.png">
4  </div>
5</div>

css
1.trapezoid,
2.trapezoid >img{
3  display: inline-block;
4  transform-origin: 0 100%;
5  overflow: hidden;
6}
7.trapezoid.w{
8  transform: skew(-15deg);
9}
10.trapezoid.c{
11  transform: skew(30deg);
12}
13.trapezoid >img{
14  transform: skew(-17deg);/*歪み修正のため，-2deg*/
15}

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

css
1.trapezoid,
2.trapezoid >img{
3  display: inline-block;
4  transform-origin: 0 100%;
5  overflow: hidden;
6}
7.trapezoid{
8  transform: skew(15deg);
9}
10.trapezoid >img{
11  transform: skew(-15deg);/*こちらは歪みなしのようなのでそのまま*/
12}

Win8, IE 11, Firefox 61で確認

投稿2018/08/29 07:38

liveasnotes

総合スコア1284

cheche0830

2018/08/31 12:44

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

行動規範の内容に同意します

ベストアンサー

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

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