画像をCSSで斜めにマスクした時の知見

画像をCSSで斜めにマスクした時の知見 2015-04-10 サイト全体が斜めになったサイトで、画像をクリッピングする必要がありました。しかもレスポンシブWebデザインです。 その時の知見と、利用しませんでしたが、ちょっとしたテクニックを思いついたので、メモとして残しておきます。 画像を斜めクリップにする方法 画像を斜めクリップするイメージは、こんな感じです。 要素を斜めにする方法は、IE9以上から利用できます。 IE8もIEの独自フィルターを利用して頑張ればできるようですが、底が見えない感じだったので、IE8は斜めにせずに対応させていただきました。 要素を斜めにするCSSは、transformプロパティを利用します。 transformプロパティには、いくつかの関数が用意されており、主に「skewY()」を利用し、場合によっては「rotate()」も利用しました。 CSSの記述例 .fo

[IndigoHawk]

レスポンシブで斜めにマスクとか鬼畜だと思ってたけど、意外となんとかなるもんなんだな。三角関数？ちょっと存じ上げませんが…。

[uca_co]

transform: skew(); したときの端処理対処法

[poriringoo]

“min-width: 117.6%; transform: skewX(10deg); transform-origin: bottom left;”

[mut00tum]

斜めマスク三角関数

[tihata]

今度斜め使いそうなので。めもんぬ。

[kasanka]

こういうの見ると、数学ってできたほうが楽しいんだろうなと思う。実用するかどうかはさておき。

[ku_marin]

( ﾟдﾟ)ﾎﾟｶｰﾝ

[glat_design]

な、なるほどね（白目） /

[nffsjj]

三角関数。全く覚えていない…！

[megazalrock]

枠を斜めにすると結局中の画像も目の錯覚で歪んで見えちゃう

[ysk_lucky-star]

なかなかキモい（褒め言葉）内容だけど、レスポンシブでそのデザイン出してくるデザイナーがキモいわ

[takehana_masaki]

RT: "画像をCSSで斜めにマスクした時の知見｜Web Design KOJIKA17"