셰브론

Chevron

봉우리와 골이 줄마다 정확히 같은 위치에서 맞물리는 대칭 지그재그 줄무늬. 문장(紋章)의 삼각형 표식에서 왔습니다.

다른 이름: 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}

"셰브론"은 원래 방패 위의 뒤집힌 V자 표식을 가리키는 문장학 용어(프랑스어로 서까래·지붕틀을 뜻하는 말에서 유래)였고, 군 계급장의 갈매기 마크로도 익숙합니다. 직물·그래픽 디자인에서는 20세기 들어 연속된 V자 줄무늬 자체를 가리키는 말로 굳어졌습니다.

헤링본과 자주 섞이지만 구조가 다릅니다 — 헤링본은 줄마다 반 칸 어긋나 있고, 셰브론은 봉우리가 세로로 정확히 정렬돼 마름모 격자처럼 보입니다. 이 정렬 덕분에 셰브론은 더 단정하고 그래픽적으로 읽히고, 헤링본은 더 짜인 듯한 질감으로 읽힙니다.

CSS 로는 135도·225도·315도·45도 네 방향 linear-gradient 를 25% 지점에서 끊어 겹치고 배경 위치를 절반 타일씩 어긋나게 두면, 네 삼각형이 맞물려 정확한 지그재그 띠를 만듭니다 — 이 4중 레이어 조합이 온라인에 가장 많이 도는 "CSS 지그재그" 레시피입니다.

언제 쓰나

중세기 모던 배경, 러그·러너 카펫, 배너·배지 테두리 장식에 씁니다. 대비를 너무 세게 주면 시각적으로 진동하는 느낌을 줍니다.