Diagonal Background Line

Overview

Placing a thick diagonal line that reaches both edges of the screen behind a section is a popular design technique for adding rhythm and depth to a page.

A naive implementation tends to involve “a pseudo-element positioned with position: absolute and tilted with transform: rotate()” or “an extra width: 100vw wrapper to escape the parent’s width” — patterns that often cause horizontal scrolling and layout issues.

This component combines three features of border-image (gradient images, fill, and outset) to draw a full-viewport-width diagonal line with zero extra elements and no horizontal scrolling.

Preview

Note: The demo clips the line inside the preview box, but on a real page the line extends all the way to the left and right edges of the browser.

HTML

<div class="diagonalLine">
  <div class="diagonalLine__content">
    <h2>Heading text</h2>
    <p>Description text goes here.</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;
}

How It Works

The core of this technique consists of three properties.

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

border-image accepts gradients as well as images. A gradient that transitions transparent → line color → transparent, tilted at -10deg, creates the “thick diagonal band”. The band thickness is controlled by the calc(50% ± var(--line-width-percent)) stops.

2. border-image-slice: fill 0

Normally, a border image is only painted in the border area. Adding the fill keyword paints the image across the entire element, including the content area.

3. border-image-outset: 0 100vi

This is the heart of the technique. border-image-outset specifies how far the border image area extends beyond the element’s border box. Specifying 100vi (100% of the viewport’s inline size) in the inline direction (left/right) paints the line (gradient) all the way to the screen edges, regardless of the element’s width.

Crucially, painting via border-image-outset has no effect on layout (it is not treated as overflow). Unlike the width: 100vw wrapper approach, it never causes horizontal scrolling due to scrollbar width.

vi is the logical-property counterpart of viewport units (equivalent to vw in horizontal writing mode). See the related article for details.

Customization

• Angle: change --line-angle (use 0deg for a horizontal band)
• Thickness: change --line-width-percent (a percentage of the element’s height)
• Color: change --line-color (semi-transparent colors blend nicely with the background)

Features

• Zero extra elements: no pseudo-elements or wrappers — just add one class to an existing element
• No horizontal scrolling: painting via border-image-outset is not treated as overflow, so no overflow-x: hidden workarounds are needed
• No layout impact: the line is purely decorative and never shifts surrounding elements
• Adjustable via custom properties: angle, thickness, and color can be changed in one place

Browser Support

Gradient sources, fill, and outset for border-image are all available in modern browsers (Chrome / Edge / Firefox / Safari), as are viewport logical units such as 100vi.