HTML

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

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

コピペで簡単 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 で要素を傾斜(ななめ)変形させる方法を紹介しました。
要素を回転でななめにしたい場合はコピペで簡単 CSS で要素を回転させる方法をご覧ください。

この記事をシェアする

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