CSSシークレット ―47のテクニックでCSSを自在に操る

知っておくべきポイント

基本的なCSSの変形処理

課題

平行四辺形とは、向かい合う 2 組の辺がともに平行な四角形のことです

（図3.11 ）。長方形も平行四辺形の一種です。デザインをダイナミックに

し、動きの感覚を与えるために平行四辺形はよく使われます（図3.12 ）。

CSS を使って、平行四辺形のボタンを作ってみましょう。まずは、

図3.13 のように通常の長方形のボタンとシンプルなスタイル設定を組み

合わせたものを作ります。そして、下のように skew()トランスフォーム

を適用して平行四辺形へと変形させます。

しかし、こうするとコンテンツにもトランスフォームが適用され、読み

にくいテキストになってしまいます（図3.14）。コンテナだけをトランス

フォームし、コンテンツはそのままにすることは可能でしょうか。

平行四辺形

10

transform:skewX(‐45deg);

120

3章：形状

図3.11

平行四辺形

入れ子の要素を使った解決策

コンテンツに対して逆方向の skew()を適用すれば、2 つのトランスフ

ォームが打ち消し合い、望む表示を得られます。ただし、このためにはコ

ンテンツを囲む要素（ divなど）が余分に必要になります。例えば以下の

ようになります。

すると図3.15 の