平行四辺形に画像をトリミングしたい。

Question

前提・実現したいこと

真ん中の画像を平行四辺形にトリミングしたいです。

発生している問題・エラーメッセージ

片方の辺しか斜めにトリミングできない。

該当のソースコード

<div class="section__flex-img">
        <div class="box section__img1"><img src="assets/images/sample/nantoshi21PAR519902088_TP_V4.jpg" alt="" class="img1"></div>
        <div class="box section__img2"><img src="assets/images/sample/nekocatIMGL58991984_TP_V4.jpg" alt="" class="img2"></div>
        <div class="box section__img3"><img src="assets/images/sample/nekocatPAR585052408_TP_V4.jpg" alt="" class="img3"></div>
      </div>

.box {
  overflow: hidden;
}
.img1, .img2, .img3 {
  width: 154px;
  height: 193px;
  object-fit: cover;
}
.section__flex-img {
  display: flex;
  justify-content: center;
}
.section__img1 {
  transform: skewX(-12deg);
  transform-origin: right;
}
.img1 {
  transform: skewX(12deg);
  transform-origin: top right;
}
.section__img2 {
  transform: skewX(-12deg);
}
.img2 {
  transform: skewX(12deg);
}
.section__img3 {
  transform: skewX(-12deg);
  transform-origin: top;
}
.img3 {
  transform: skewX(12deg);
  transform-origin: bottom left;
}

試したこと

・transform-originを使ってtop right bottom left全ての方向を入れたが実現出来なかった。
・skewをY軸に変更してみたが、左右の画像とトリミングが異なってしまう。

補足情報（FW/ツールのバージョンなど）

DreamWeber最新版を使用しています。

Comments

[Lhankor_Mhy]

画像エディタでそういう画像を作った方が早そう（開発時にも閲覧時にも）ですが、なにか事情がありますか？

[jam27]

コメントありがとうございます。
公開後、簡単に画像の差し変わりすることも視野に入れているためです。

[Lhankor_Mhy]

では、yambejpさんのご回答の通りだと思います。

[jam27]

申し訳ございません。コーディングで実現させることを目標としています。

[Lhankor_Mhy]

コーディングで実現できると思いますが、なにか問題が起きていますか？

[Lhankor_Mhy]

SVGのコードを書くのがイヤ、とかそういうことですか？

[jam27]

申し訳ございません。SVGがよくわかりません。

Answer 1

CSSのclip-pathで切り抜いて、ネガティブマージンで重ねたらどうでしょう。
clip-pathのジェネレータを使えば簡単にコードを生成できます。

Clippy — CSS clip-path maker

.box {
  overflow: hidden;
  width: 154px;
  height: 193px;
}
.img1, .img2, .img3 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section__flex-img {
  display: flex;
  justify-content: center;
}
.section__img2 {
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
  width: 200px;
  margin: 0 -50px;
  z-index:10;
}

CodePenサンプル

Comments

[jam27]

ありがとうございます！できました！

Answer 2

トリミングの意図がわかりませんがSVGでマスクして表示すればよいでしょう

Comments

[jam27]

申し訳ございません。
コーディングで実現できる方法を求めております。
よろしくお願いいたします。