サンプル

See the Pen Codepen by Tora (@webtoranomaki) on CodePen.

コード

この手法は使いやすいんだけど、:before :after で要素の上下に疑似要素を配置する場合のみ、欠点がある。

それは、疑似要素の斜めが接する境界線が汚くなること。境界線がぼやける、にじむ、ような描画になるのだ。だから、そういうデザインの場合は、skewを使った手法を採用するようにしている。

※斜め背景の色々な手法・メリット・デメリットは『斜め背景のボックスを表現する色々な方法の使い方と特徴』にまとめておく