斜めの背景ライン

概要

セクションの背景に、画面の左右いっぱいまで届く斜めの太いラインを敷くデザインは、ページにリズムや奥行きを与える手法としてよく使われます。

素直に実装しようとすると「position: absolute で配置した擬似要素を transform: rotate() で傾ける」「親要素の外まではみ出すために width: 100vw のラッパーを追加する」といった方法になりがちですが、横スクロールの発生やレイアウト崩れに悩まされることが多いパターンです。

このパーツでは、border-image の3つの機能（グラデーション画像・fill・outset）を組み合わせて、追加要素ゼロ・横スクロールなしで画面幅いっぱいの斜めラインを描画する方法を紹介します。

プレビュー

※デモではプレビュー枠内にクリップしていますが、実際のページではブラウザの左右の端までラインが伸びます。

HTML

<div class="diagonalLine">
  <div class="diagonalLine__content">
    <h2>見出しテキスト</h2>
    <p>ここに説明文が入ります。</p>
  </div>
</div>

CSS

/* Diagonal Background Line
   border-imageを使って、要素の幅を超えてブラウザ幅いっぱいに
   斜めの太いラインを描画するパーツ
   ========================================================================== */

.diagonalLine {
  --line-color: #c1e9ff;
  --line-width-percent: 10.5%;
  --line-angle: -10deg;

  position: relative;

  /* グラデーションを枠線画像として使用 */
  border-image-source: linear-gradient(
    var(--line-angle),
    transparent 0%,
    transparent calc(50% - var(--line-width-percent)),
    var(--line-color) calc(50% - var(--line-width-percent)),
    var(--line-color) calc(50% + var(--line-width-percent)),
    transparent calc(50% + var(--line-width-percent)),
    transparent 100%
  );

  /* fill: 枠線だけでなく要素の背景全体にも画像を敷く */
  border-image-slice: fill 0;

  /* インライン方向(左右)に 100vi 拡張して画面幅いっぱいに描画する */
  border-image-outset: 0 100vi;
}

/* デモ用のコンテンツ（ラインの上に重なる要素） */
.diagonalLine__content {
  position: relative;
  max-inline-size: 480px;
  margin-inline: auto;
  padding: 2rem 1.5rem;
  text-align: center;
}

.diagonalLine__content > * + * {
  margin-block-start: 0.75em;
}

仕組みの解説

このテクニックの本体は、次の3つのプロパティです。

1. border-image-source: linear-gradient(…)

border-image には画像だけでなくグラデーションも指定できます。transparent → ライン色 → transparent と切り替わるグラデーションを -10deg 傾けることで「斜めの太い帯」を作っています。帯の太さは calc(50% ± var(--line-width-percent)) の割合で制御します。

2. border-image-slice: fill 0

通常、border-imageは枠線部分にしか描画されません。fill キーワードを付けると、要素のコンテンツ領域を含む全体に画像が描画されるようになります。

3. border-image-outset: 0 100vi

ここがこのテクニックの核心です。border-image-outset は「境界画像を要素のボーダーボックスからどれだけ外側に拡張して描画するか」を指定します。インライン方向（左右）に 100vi（ビューポートのインラインサイズ100%）を指定することで、要素の幅に関係なく画面の端までライン(グラデーション)が描画されます。

重要なのは、border-image-outset による描画はレイアウトに一切影響しない（オーバーフローとして扱われない）点です。width: 100vw のラッパーを使う方法と違い、スクロールバーの幅による横スクロールが発生しません。

vi はビューポート単位の論理プロパティ版（横書きでは vw と同じ）です。詳しくは関連記事を参照してください。

カスタマイズ

• 角度: --line-angle を変更（0deg にすれば水平の帯になります）
• 太さ: --line-width-percent を変更（要素の高さに対する割合）
• 色: --line-color を変更（半透明色にすると背景と馴染みます）

特徴

• 追加要素ゼロ: 擬似要素・ラッパー要素なしで、既存の要素に1クラス追加するだけ
• 横スクロールが発生しない: border-image-outset の描画はオーバーフロー扱いにならないため、overflow-x: hidden などの対処が不要
• レイアウトに影響しない: ラインは純粋な装飾として描画され、周囲の要素の配置を変えない
• カスタムプロパティで調整可能: 角度・太さ・色を1か所で変更できる

ブラウザ対応

border-image のグラデーション指定・fill・outset はいずれもモダンブラウザ（Chrome / Edge / Firefox / Safari）で利用できます。100vi などのビューポート論理単位も同様です。