【コーディング】CSSで元画像を変形画像にするやり方

2023 3/29

2022年2月25日 2023年3月29日

デザインカンプは変形なのに支給された画像は長方形だ・・・
どうすれば・・・。

画像を渡されたけど、加工なしで渡された場合はコーダー側で加工が必要になります。
そんなときでもCSSで上手く解決しちゃいます！では解説していきますね！

CSSでtransform:Skewを使えば変形画像が可能に

コピーだけしたい方はこちらをコピーしてください

See the Pen Untitled by yoppi (@yoppi) on CodePen.

解説

skewについて

transform:skewについては「ふ」さんの記事がすごくわかりやすく、画像付きで解説されています。
記事はこちらです。

画像を入れている要素にskewを当ててその分を画像で相殺する

.img-box{
  transform: skewX(24deg) translateX(-104px);
  overflow: hidden;
  position: relative;
}
.img-box img{
  position:absolute;
  top:0;
  left:0;
  transform: skewX(-24deg)translateX( 104px);
  object-fit:cover;
  object-position: top;
  width:100%;
  height:inherit;
}

画像を入れている要素の上にさらにもう一つ要素をつくり
①画像
②画像をいれている要素
③overfllow:hiddenをつけるための要素

※②で当てたskew分①で相殺してあげれば画像のねじれがなくなります。
②と③でそれぞれにover-fllow:hiddenをつけることではみ出る部分を非表示にします。