Design Atlas
한국어
▞ Patterns & textiles

Chevron

셰브론

A symmetric zigzag stripe whose peaks and troughs line up at the same point row after row — the name comes from a triangular charge in heraldry.

Also known as: V자무늬Zigzag stripe
···
html
<div class="chev"></div><span class="tag">chevron</span>
css
.chev{position:absolute;inset:0;background-color:#fdf6ee;
  background-image:
    linear-gradient(135deg,#d1476b 25%,transparent 25%),
    linear-gradient(225deg,#d1476b 25%,transparent 25%),
    linear-gradient(315deg,#d1476b 25%,transparent 25%),
    linear-gradient(45deg,#d1476b 25%,transparent 25%);
  background-position:-10px 0,-10px 0,0 0,0 0;
  background-size:20px 20px;
  animation:pan 8s linear infinite}
@keyframes pan{to{background-position:-10px 20px,-10px 20px,0 20px,0 20px}}
.tag{position:absolute;left:10px;bottom:8px;padding:3px 9px;border-radius:999px;background:rgba(60,15,28,.82);
  color:#fdf6ee;font:600 10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.03em}

"Chevron" originally named an inverted-V charge on a heraldic shield (from a French word for rafter or roof truss), and the same shape is familiar from military rank stripes. In textiles and graphic design the word settled into meaning the continuous zigzag stripe itself sometime in the 20th century.

It's frequently mixed up with herringbone, but the structures differ: herringbone's rows are offset by half a step, while chevron's peaks line up in a straight vertical column, reading as a diamond lattice. That alignment is what makes chevron feel crisp and graphic where herringbone feels woven.

In CSS, four linear-gradients at 135°, 225°, 315°, and 45° — each cut at the 25% mark and offset by half a tile in background-position — interlock into four triangles that form a clean zigzag band. This four-layer combination is the recipe that circulates most widely online as "the CSS zigzag."

When to use

Use for mid-century modern backgrounds, rug/runner motifs, and banner or badge borders. Too much contrast makes it visually vibrate.