CSS区切り線ジェネレーター

シンプルな線の区切り

/* Subtle horizontal rule */
.divider {
  height: 1px;
  background: #e5e7eb;
  border: 0;
  margin: 3rem 0;
}

/* With text in the middle */
.divider-text {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #6b7280;
}
.divider-text::before,
.divider-text::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

斜めのセクション境界

clip-pathのテクニック：

.hero {
  background: #0f172a;
  color: white;
  padding: 4rem 1rem;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 48px));
}

左下の角が48px引き上げられ、斜めの傾斜ができます。きれいに移行させるには、次のセクションを傾斜にぴったり合わせて始める必要があります。白い隙間を作らないようにしましょう。

逆向きの斜めにしたい場合は、引き上げる下の角を入れ替えます。切り込みやジグザグにするには、頂点をさらに追加します。

SVGの波形区切り

有機的な曲線を作るには、SVGがもっとも整った方法です：

<div class="hero">…</div>
<svg class="wave" viewBox="0 0 1440 80" preserveAspectRatio="none">
  <path d="M0 80 C 360 0, 1080 0, 1440 80 L 1440 80 L 0 80 Z"
        fill="white"/>
</svg>

.wave {
  display: block;
  width: 100%;
  height: 60px;
  margin-top: -1px; /* close any subpixel gap */
}

preserveAspectRatio="none"を指定すると、元の寸法に関係なくSVGがコンテナの幅まで引き伸ばされます。margin-top: -1pxは、一部のレンダラーで残る髪の毛ほどの隙間を埋めます。

よく使う区切りの一覧

便利なスニペット：

ヒント

• 継ぎ目を合わせる。区切りの背景（SVGの塗りや斜めセクションの色）は、次のセクションの背景と正確に一致させる必要があります。1pxの色味のずれでも効果が台無しになります。
• 狭い画面では急な曲線を避ける。1440pxでは優雅に見える波形も、360pxではつぶれた正弦波のように見えることがあります。モバイルではメディアクエリで振幅を小さくするか、別のSVGパスを使いましょう。
• 複数の区切りを重ねない。セクション境界ごとに継ぎ目は1つで十分です。
• パフォーマンス。インラインのSVG区切りはほとんど負荷になりませんが、画像ベースの区切りはネットワークリクエストが発生します。インラインSVGに軍配が上がります。