CSSの平行四辺形とひし形の変換

*以下のテクニックはすべて Lea Verou 著「CSS Secrets」から派生したものです

平行線

skew()の変形属性によって長方形を斜めに引っ張ることで、平行四辺形の作図が得られます（skewで使用する座標系は縦方向にX軸、横方向にY軸を持っています。一般的な座標系とは反対です)。

リーリー

しかし、コンテンツのスキューは私たちが必要とする効果ではない可能性があります。従来の解決策は、内側の層にdivをネストし、反対方向にプルを追加することですtransform: skewX(45deg); しかし、コードがあります。潔癖症の人は、それを受け入れることができないと言います。

もう 1 つのアイデアは、すべてのスタイルを疑似要素に適用することです。次に、擬似要素を変換します。

リーリー

これにより、コンテンツの偏りの問題が解決されるだけでなく、HTML 構造も以前と同様にきれいなままになります。ただし、擬似要素によって生成されたパターンはコンテンツに重なるため、背景を設定するとコンテンツが覆われてしまうため、z-index: -1 を追加する必要があることに注意してください。

ひし形の写真

正方形をベースにすると、ひし形は正方形の模様を45度回転させたものになります。外側の div を 45 度回転し、次に内側の img を反対方向に 45 度回転することを考えるのは簡単です。以下のパターンが得られます。

リーリー

これはかなり正八角形です。プロダクトマネージャーを説得できれば、作業は完了です。うーん、納得できないかも知れませんね。 。 。

ここでは回転方向が一貫していないため、外側の div が余分な部分をインターセプトし (オーバーフロー:非表示に注意してください)、その一部は空になります。空白の部分を埋めるとひし形になります。ここでスケッチを描き、ピタゴラスの定理を使用して計算できます。

計算結果は1.42倍に拡大して充填完了です。 img のtransform属性をtransform:rotate(45deg) scale(1.42)に変更すると、次の画像が得られます。

このひし形を構築するスキームには欠陥があります。つまり、元の画像が正方形でない場合、より大きな拡大率を使用する必要があり、キャプチャされた画像の内容がより制限されます。

そして計画自体は単純でエレガントなものではありません。ここでは、固定位置の点を渡すことで画像を任意の多角形に切り取ることができるプロパティ clip-path (残念ながら、サポートが適切ではないようです)

を紹介します。

リーリー

近い将来、clip-path 属性がさまざまなブラウザでより適切にサポートされることを願っています。