背景を斜めにする方法って、transform: skew;とか、transform: rotate; でボックス自体を斜めにさせたり、svgで三角を作ったり、::beforeや::afterなどの疑似要素で三角を作ったり、と手法はいくつあるんだけど、それぞれに長所と短所というか、デザインによって使える状況が違ったりする。
ここでは、それぞれの斜め背景デザインの実装における活用方法や注意点などをまとめる。
transformを使った手法の特徴
transformを使うメリット
transform: skew;、transform: rotate;を使う場合のメリットは、要素を斜めにすることが出来る点。
他の手法はボックス要素の上下に三角形を配置して見た目的に斜めに見せるが、これは本当に要素を斜めにするため、直感的でシンプル、至極分かりやすい。
しかも、上下に隣接するボックスが背景画像を使ったデザインの場合、三角形で隠して斜めを表現する手法だと、この背景画像に三角形部分があたってしまうが、このtransformを使った方法ならその心配がない。
transformを使うデメリット
他の手法よりもとても簡単で直感的。なのに１つ大きなデメリットがある。それは、特定の状況化で要素内の文字や画像などがぼやけたり、にじんでしまう点。
例えば、個人的に遭遇したそのような状況は、要素内でoverflow: hidden: を使っている領域の文字がぼやけたり、画像スライダーがあると、スライド時に要素内の全ての文字がぼやけたり。ウェブフォントを使うと、フォントウェイトが少し太く表示されたり。
あと、色が付いてる背景が接合する場合、その色によってはその境界線が少し汚くなるのもデメリット。ジャギるというか、ぼやけるというか。なので、デザインで色付きの接合部分がある場合は、最初に軽く組んでテストしている。
実際にtransformを使った手法は「【CSS: skew】要素や背景などのブロックを斜めに傾けて表示させる方法」にて。
疑似要素を使った手法の特徴
疑似要素を使うメリット
疑似要素を使って斜め背景のデザインを実現するには、以下のような方法がある。
- 疑似要素で三角形を作って、要素の上下を隠して斜めに見せる方法
- 疑似要素で長方形を作って、それを斜めにして要素の上下を隠して斜めに見せる方法
いずれも、疑似要素でボックスを隠して、見た目的に斜めに見せるため、要素が斜めになっているわけでないので、transformを使った場合のデメリットである、要素内の文字などがぼやけるというリスクを回避できる点。単純にそれだけ。
疑似要素を使うデメリット
疑似要素で上下に三角形なり長方形なりを配置するので、その上下に隣接するボックスの色によって疑似要素の色を変えなきゃいけないし、背景画像が使われていると、その部分に疑似要素があたるので、背景画像が途切れてしまうのがデメリット。
また、長方形で要素を隠す場合は、幅が要素をよりも広くなってしまうので、はみ出た部分を隠すための包含ブロックが必要になるし、三角形で表示させる場合は、幅に合わせて伸縮させるのが苦手。
実際に疑似要素を使った手法は「【CSS: 疑似要素】要素や背景などのブロックを斜めに傾けて表示させる方法」にて。
SVGを使った手法の特徴
SVGを使うメリット
疑似要素を使うよりも、もっと簡単に実装が出来るし、レスポンシブデザインでも問題なく伸縮させられる。transformが使えないなら、基本的にはこれを採用している。
SVGを使うデメリット
ボックスの上下に三角形を配置するため、疑似要素と同じく背景画像が接合部分にくるようなデザインには向かない。あとは、疑似要素じゃないので、上下にSVGを設置するコードを記述する必要がある点。コードがごちゃごちゃするので、そこに目をつむる必要がある。
まとめ
それぞれの長所、短所があるので、デザインに応じてどの手法を採用するかを決めないといけない。基本的にはtransformを使う手法が一番使いやすいんだけどね。。