斜めスラッシュ分割ヒーロー
斜めスラッシュ分割ヒーローは、背景レイヤー（ .hero-diag__bg ）に clip-path:polygon(0 0,100% 0,100% 60%,0 100%) を当てて、矩形を斜めに切り落とした構成です。
解説
斜めスラッシュ分割ヒーローは、背景レイヤー（.hero-diag__bg）に clip-path:polygon(0 0,100% 0,100% 60%,0 100%) を当てて、矩形を斜めに切り落とした構成です。JavaScript は不使用で、紺〜青のグラデーションを斜めに走らせ、その上に白文字の見出し・本文・ボタンを重ねています。角度の付いた分断が画面に動きとスピード感を与えるため、止まった印象になりがちな単色ヒーローと差別化できます。
使いどころ
- スタートアップや SaaS のトップで「速さ・先進性」を打ち出すとき
- スポーツ・フィットネス系でエッジの効いた印象を出したいとき
- キャンペーン LP の冒頭で視線を斜めに誘導したいとき
斜めの角度は polygon の 60% の値で調整できます。値を小さくすると傾斜が急になり、大きくすると緩やかになります。配色は linear-gradient の 2 色を差し替えるだけでブランドに合わせられます。文字は背景の濃い側に重なるよう配置し、コントラスト比を確保してください。clip-path は主要ブラウザで安定して動くので、フォールバックの心配はほぼ不要です。
使用例・適したシーン
- LP のファーストビュー
- サービストップの導入
- コーポレートサイトのトップ
よくある質問
斜めの角度を変えるにはどこをいじればいいですか？
背景の clip-path:polygon の 60% という数値を変更します。値を小さくすると傾斜が急になり、大きくすると緩やかになります。左右の傾き方向を逆にしたい場合は座標の並びを入れ替えてください。
JavaScript は必要ですか？
不要です。背景の切り抜きはすべて CSS の clip-path で実装しているため、HTML と CSS を貼るだけで動作します。