CSS シェブロンの作り方

右向きシェブロン

.chevron {
  clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%, 25% 50%);
  -webkit-clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%, 25% 50%);
}

左向きシェブロン

.chevron-left {
  clip-path: polygon(25% 0, 100% 0, 75% 50%, 100% 100%, 25% 100%, 0 50%);
  -webkit-clip-path: polygon(25% 0, 100% 0, 75% 50%, 100% 100%, 25% 100%, 0 50%);
}

ポイントと注意点

• パンくずに並べる：右向きシェブロンを横並びにし、margin-left をマイナスにして左のくぼみに重ねると矢羽根が連続します。
• 尖りの強さ：先端の 100% 50% と くぼみ 25% 50% を動かすと、尖り具合が変わります。
• 文字の余白：左右がくぼむので padding を左右に多めにとると文字が切れません。微調整は clip-path ジェネレーター が便利です。

関連