HTML

コピペで簡単 CSS で要素を傾斜変形させる方法

コピペで簡単 CSS で要素を傾斜変形させる方法を紹介します。
例えば、要素を傾斜させて、デザインのアクセントにしたい時などに便利な方法です。

要素を傾斜変形させる方法

特定の要素を傾斜変形させる場合は transformskew() を指定します。
次の指定は、要素を45度傾斜変形させる方法です。

ベースの HTML は次の通りです。

<div class="skew">
<p>テキスト</p>
</div>

CSSの指定は次の通りです。

.skew {
-moz-transform: skew(-45deg);
-ms-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}

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

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

.skew {
-moz-transform: skew(-45deg);
-ms-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}
.skew p {
-moz-transform: skew(45deg);
-ms-transform: skew(45deg);
-webkit-transform: skew(45deg);
transform: skew(45deg);
}

まとめ

コピペで簡単 CSS で要素を傾斜変形させる方法を紹介しました。

合わせて読みたい関連記事