CSS で要素をななめに見せる傾斜(けいしゃ)変形させる方法

CSS で要素をななめに見せる傾斜(けいしゃ)変形させる方法

CSS で要素をななめに見せる傾斜(けいしゃ)変形させる方法を紹介します。
例えば、要素を傾斜にして、デザインのアクセントにしたい時などに便利な方法です。
回転で要素をななめに見せる方法はCSS で要素を回転させる方法をご覧ください。

要素を傾斜(けいしゃ)変形させる方法

特定の要素を傾斜変形させる場合は transformskewX() skewY() skew() を指定します。
横に傾斜させる場合は skewX を指定します。

.skewX {
transform: skewX(45deg);
}

縦に傾斜させる場合は skewY を指定します。

.skewY {
transform: skewY(45deg);
}

両方の値を同時に加えたい場合は skew を指定します。

.skew {
transform: skew(15deg,15deg);
}

要素の中身を傾斜変形させない方法

要素の中を傾斜変形させたくない場合は、中の要素に対して逆の値を指定します。

.skewX {
transform: skewX(-45deg);
}
.skew p {
transform: skewX(45deg);
}

まとめ

CSS で要素をななめに見せる傾斜(けいしゃ)変形させる方法を紹介しました。
要素を回転でななめにしたい場合はCSS で要素を回転させる方法をご覧ください。