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

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

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

特定の要素を傾斜変形させる場合は transform で skewX() 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 で要素を回転させる方法をご覧ください。