斜めの背景・波の背景をCSSで作る｜コピペで使える5種類と、使う・使わないの判断

ホームページの区切り（セクション）の境目を、まっすぐな横線ではなく、斜めや波の形にする。サービス紹介のページや、お店のトップページでよく見かける表現です。画像を作らなくても、CSSの clip-path（クリップパス：見せる範囲を形で切り抜く指定）や、数行のSVGで作れます。

使いどころ

話の大きな切り替わりに、1ページで1〜2か所だけ使う。すべての区切りを斜めや波にすると、どこが大事な切れ目か分からなくなるので使わない。

今回は、下が斜めに切れた区切り、上下とも斜めの帯、波の区切り、丸くふくらむ区切り、波が少しだけ動く区切りの5種類を、コピペ用のコードつきで紹介します。

連載「WEBの技術」の13回目です。
今回は「背景の形」の回。形を変えると、ページの印象ががらっと変わります。そのぶん、どこに使うかで見やすさにも差が出る技術です。

完成見本：5種類の区切り

青い区切りの下に、つぎの内容（灰色の線）が続いている、という想定の見本です。5番目は、ページを開いたときに波が5秒だけ流れて止まります。

CLIP-PATH1. 下が斜めに切れた区切り

SKEW2. 上下とも斜めの帯

SVG WAVE3. 波の区切り（SVG）

BORDER-RADIUS4. 下が丸くふくらむ区切り

MOVING WAVE5. 波がゆっくり動いて止まる

※ 見本は見た目を見せるためのもので、読み上げソフトでは読まれないようにしています。中身はすぐ下のコードと同じです。

※ 5番目は、記事で見せるために7秒ごとに最初から動かし直しています。コピペ用のコードは、1回動いたら止まったままです。「動きを減らす」設定をオンにしている方には、最初から止まった状態で表示しています。

コピペ用のコード

5種類とも、最初に共通のCSSを入れ、そのうえで見本ごとのCSSを足します。共通のCSSは、各見本のコードの先頭にも入れてあります。HTMLは使いたい場所に、CSSはサイトのCSSファイルや、WordPressならテーマの「追加CSS」などに入れます。クラス名の頭の kd-bgw は、サイトのほかのデザインと名前がぶつからないようにするための目印です。

1. 下が斜めに切れた区切り

青い区切りの下の端を、右上がりの斜めに切ります。四角を4つの点で囲み直して、その内側だけを見せる clip-path を使います。いちばんよく使う形です。

HTML

<section class="kd-bgw kd-bgw-slant">
  <h2>私たちについて</h2>
  <p>小さなお店のホームページを、言葉から一緒に考えます。</p>
</section>

CSS

/* 5種類に共通：青い区切りと、中の文字 */
.kd-bgw {
  padding: 40px 20px;
  background: #0369A1;
  color: #FFFFFF;
}
.kd-bgw h2 {
  margin: 0 0 6px;
  font-size: 22px;
  line-height: 1.4;
}
.kd-bgw p {
  margin: 0;
}
.kd-bgw-slant {
  /* 斜めに切る高さ（48px）の分だけ、下の余白を広げる */
  padding-bottom: 88px;
  /* 左上 → 右上 → 右の下から48px上 → 左下 の4点で囲む */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), 0 100%);
}

2. 上下とも斜めの帯

帯そのものを少し傾けて、上と下の両方を斜めにします。傾けるのは後ろに敷いた色の板（::before）だけなので、文字はまっすぐのままです。

HTML

<section class="kd-bgw kd-bgw-band">
  <h2>私たちについて</h2>
  <p>小さなお店のホームページを、言葉から一緒に考えます。</p>
</section>

CSS

/* 5種類に共通：青い区切りと、中の文字 */
.kd-bgw {
  padding: 40px 20px;
  background: #0369A1;
  color: #FFFFFF;
}
.kd-bgw h2 {
  margin: 0 0 6px;
  font-size: 22px;
  line-height: 1.4;
}
.kd-bgw p {
  margin: 0;
}
.kd-bgw-band {
  position: relative;
  /* 色の板を、この区切りの中だけで重ねる */
  isolation: isolate;
  padding: 72px 20px;
  background: none;
}
/* 後ろに敷く色の板。これだけを傾ける */
.kd-bgw-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #0369A1;
  transform: skewY(-4deg);
}

3. 波の区切り（SVG）

区切りの下に、白い波の絵（SVG：線や形を数字で描く画像）を重ねて、波打つ境目に見せます。HTMLの中に書くので、画像ファイルは要りません。

HTML

<section class="kd-bgw kd-bgw-wave">
  <h2>私たちについて</h2>
  <p>小さなお店のホームページを、言葉から一緒に考えます。</p>
  <svg class="kd-bgw-wave-svg" viewBox="0 0 1200 80" preserveAspectRatio="none" aria-hidden="true" focusable="false">
    <path d="M0 40 C300 0 300 0 600 40 C900 80 900 80 1200 40 V80 H0 Z" fill="#FFFFFF"/>
  </svg>
</section>

CSS

/* 5種類に共通：青い区切りと、中の文字 */
.kd-bgw {
  padding: 40px 20px;
  background: #0369A1;
  color: #FFFFFF;
}
.kd-bgw h2 {
  margin: 0 0 6px;
  font-size: 22px;
  line-height: 1.4;
}
.kd-bgw p {
  margin: 0;
}
.kd-bgw-wave {
  position: relative;
  /* 波の高さ（48px）の分だけ、下の余白を広げる */
  padding-bottom: 88px;
}
.kd-bgw-wave-svg {
  position: absolute;
  left: 0;
  /* 1pxずらして、下の区切りとのすき間を隠す */
  bottom: -1px;
  display: block;
  width: 100%;
  height: 48px;
}

4. 下が丸くふくらむ区切り

下の2つの角を、横は半分・縦は48pxの楕円で丸めて、下の端をゆるいカーブにします。角を丸める border-radius だけでできる、いちばん手軽な形です。

HTML

<section class="kd-bgw kd-bgw-curve">
  <h2>私たちについて</h2>
  <p>小さなお店のホームページを、言葉から一緒に考えます。</p>
</section>

CSS

/* 5種類に共通：青い区切りと、中の文字 */
.kd-bgw {
  padding: 40px 20px;
  background: #0369A1;
  color: #FFFFFF;
}
.kd-bgw h2 {
  margin: 0 0 6px;
  font-size: 22px;
  line-height: 1.4;
}
.kd-bgw p {
  margin: 0;
}
.kd-bgw-curve {
  padding-bottom: 64px;
  /* 「/」の左が横の丸み、右が縦の丸み。下の2つの角だけ丸める */
  border-radius: 0 0 50% 50% / 0 0 48px 48px;
}

5. 波がゆっくり動いて止まる

2枚の波を重ねて、別々の向きに5秒だけ流してから止めます。ページを開いたときに少しだけ動く、控えめな飾りです。ずっと動かし続けない理由は、後半の「見る人への配慮」で説明します。

HTML

<section class="kd-bgw kd-bgw-drift">
  <h2>私たちについて</h2>
  <p>小さなお店のホームページを、言葉から一緒に考えます。</p>
</section>

CSS

/* 5種類に共通：青い区切りと、中の文字 */
.kd-bgw {
  padding: 40px 20px;
  background: #0369A1;
  color: #FFFFFF;
}
.kd-bgw h2 {
  margin: 0 0 6px;
  font-size: 22px;
  line-height: 1.4;
}
.kd-bgw p {
  margin: 0;
}
.kd-bgw-drift {
  position: relative;
  padding-bottom: 96px;
}
/* 横にくり返す白い波を2枚。::before が奥、::after が手前 */
.kd-bgw-drift::before,
.kd-bgw-drift::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 56px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 56' preserveAspectRatio='none'%3E%3Cpath d='M0 28 C50 8 150 8 200 28 C250 48 350 48 400 28 V56 H0 Z' fill='%23ffffff'/%3E%3C/svg%3E") repeat-x 0 100% / 400px 56px;
  animation: kd-bgw-drift 5s ease-out both;
}
.kd-bgw-drift::before {
  bottom: 10px;
  opacity: .4;
  animation-name: kd-bgw-drift-back;
}
@keyframes kd-bgw-drift {
  from { background-position: -400px 100%; }
  to   { background-position: 0 100%; }
}
@keyframes kd-bgw-drift-back {
  from { background-position: 200px 100%; }
  to   { background-position: -200px 100%; }
}
/* 動きを減らす設定の人には、最初から止めておく */
@media (prefers-reduced-motion: reduce) {
  .kd-bgw-drift::before,
  .kd-bgw-drift::after {
    animation: none;
  }
}

仕組み：4つのやり方の違い

1. clip-path：見せる範囲を「点」で決める

clip-path: polygon() は、点の位置をいくつか並べ、その点を結んだ形の内側だけを見せる指定です。外側は見えなくなります。見本では、左上（0 0）、右上（100% 0）、右の下から48px上（100% calc(100% - 48px)）、左下（0 100%）の4点を結んでいます。右下の角だけが48px持ち上がるので、下の端が右上がりの斜めになります。

切った分、区切りの中も見えなくなるので、文字が切られないように、下の余白（padding-bottom）を切る高さの分だけ広げておきます。MDNでは、clip-path は2023年7月から、主要なブラウザでそろって使える「Baseline」の広く使える段階と表示されています。

2. skewY：板ごと傾ける

transform: skewY(-4deg) は、要素を縦方向に4度傾ける指定です。区切りそのものを傾けると、中の文字まで斜めになってしまいます。そこで、後ろに敷いた色の板（::before：区切りの中に、CSSだけで足す飾りの要素）だけを傾け、文字はまっすぐのまま残しています。

isolation: isolate は、重なりの順番をこの区切りの中だけで決めるための指定です。これがないと、z-index: -1 の板が、ページのほかの背景の下にもぐって見えなくなることがあります。

3. SVG：波の絵を重ねる

波の見本は、区切りの一番下に、白く塗った波の絵（SVG）を重ねています。SVGの中の path は「この点から、このカーブで、ここまで」という線の道順です。preserveAspectRatio="none" は、絵の縦横の比率を守らず、枠いっぱいに伸ばす指定です。これがあるので、画面の幅が変わっても、波が横いっぱいに広がります。

bottom: -1px で1pxだけ下にずらしているのは、画面の拡大率によって、波と下の区切りの間に細いすき間が見えることがあるためです。波は飾りなので、読み上げソフトが読まないように aria-hidden="true" を付けています。

4. border-radius：角を楕円で丸める

border-radius は、ふだんは角を丸める指定です。「/」で区切ると、左に横の丸み、右に縦の丸みを書けます。0 0 50% 50% / 0 0 48px 48px は、下の2つの角を、横は幅の半分・縦は48pxの楕円で丸める、という意味です。左右の丸みが真ん中でつながって、下の端がゆるいカーブになります。

5. 動く波：背景の位置を5秒だけずらす

5番目は、横にくり返す波の絵を背景に敷き、背景を置く位置（background-position）を5秒かけてずらしています。奥の波と手前の波を別の向きに動かすと、水面のように見えます。animation の回数を書いていないので、1回動いたら止まります。

やり方	向いている形	気をつけること
clip-path	斜め・三角・台形など、直線で作れる形	切った部分は中身も影も見えなくなる
skewY	上下とも斜めの帯	傾ける角度が同じでも、幅が広いほど段差が大きくなる
SVG	波・山・好きな曲線	下の区切りと同じ色で塗る。色を変えたら両方直す
border-radius	ゆるいカーブ	大きくふくらませる形には向かない

数値を変えるとどうなるか

斜めの高さ（1の見本）

calc(100% - 48px) の 48px と、下の余白を一緒に変えて並べました。

24px

見本 48px

96px

24pxだと、斜めだと気づかれにくく、「少し傾いて見える線」になります。96pxだと、強い斜めで動きが出ますが、スマホの幅では急な坂になり、区切りの下のほうが大きく空きます。見本の48px前後が、斜めだと分かり、場所もとりすぎない高さです。

波の高さ（3の見本）

24px

見本 48px

96px

24pxだと、おだやかな波です。96pxだと、スマホの幅では波というより大きな山に見えます。preserveAspectRatio="none" で横だけが伸び縮みするので、同じ高さでも、幅が狭いほど波は急になります。

変えるところ	小さくすると	大きくすると
斜めの高さ（clip-path の px）	控えめ。気づかれにくい	動きが出るが、スマホでは急な坂になる
傾ける角度（skewY の deg）	帯がほぼ水平になる	PCの広い画面で段差が大きくなる
波の高さ（SVG の height）	おだやかな波	スマホでは大きな山に見える

スマホと、見る人への配慮

高さは px で決めると、スマホでも同じ段差になる

clip-path の斜めの高さを % で書くと、区切りの高さに合わせて段差が変わります。スマホでは文字が折り返して区切りが縦に長くなるので、PCより急な斜めになります。見本のように px で決めておくと、どの画面でも同じ段差で切れます。反対に skewY は角度で決めるので、PCの広い画面ほど段差が大きくなります。2の見本で上下の余白を72pxと広めにとっているのは、そのためです。

文字と背景のコントラスト

見本の青（#0369A1）と白い文字のコントラスト比は約5.9:1です。W3Cの基準（WCAG 2.2）では、ふつうの大きさの文字は4.5:1以上が目安です。KAKERUのブルー（#0EA5E9）は、白い文字と合わせると約2.8:1で、この基準に届きません。明るい色の区切りに白い文字を乗せるときは、色を濃くするか、文字の色を濃くします。

動く波は、5秒で止める

W3Cの基準には、「自動で始まり、5秒より長く続き、ほかの内容と一緒に表示される動き」には、止める・隠す手段を用意する、という項目があります。背景の飾りの波でも、ずっと動き続けていれば、この項目に当てはまります。見本は動きを5秒で終わらせ、さらに「動きを減らす」設定の人には最初から止めています（@media (prefers-reduced-motion: reduce)）。ずっと動かしたい場合は、止めるボタンを用意します。

切った部分は、中身も見えなくなる

clip-path は、決めた形の外側をすべて見えなくします。区切りに付けた影（box-shadow）や、はみ出したボタンも、外側にあれば消えます。斜めの端の近くには、文字やボタンを置かないようにします。

やりすぎ注意

斜め・波・カーブをページの中で混ぜたり、すべての区切りに使ったりすると、形のほうが目立って、内容が入ってきにくくなります。1ページで使う形は1種類、使う場所は1〜2か所、と決めておくと、そこが話の切り替わりだと伝わります。

背景の形は、ページの「句読点」のようなものだと考えています。
大きな区切りにだけ使うから、読む人が「ここで話が変わる」と気づけます。

AIに頼むなら

この区切りは、Claudeなどの生成AIに頼んでもすぐ作ってもらえます。そのときは、形・高さ・どこに使うか・配慮まで、まとめて伝えると、手直しが少なく済みます。

サービス紹介の区切り（背景 #0369A1・白い文字）の下の端を、右上がりの斜めにしたい。
clip-path: polygon で、斜めの高さは48pxに固定（%ではなくpx）。文字が切れないよう下の余白も広げて。
画像は使わず、スマホの幅（390px）でも同じ段差になるように。

AIが出したコードは、そのまま使う前に、次の3つを確かめます。

スマホの幅で、文字が切れていないか。斜めの高さを % で書いていると、スマホで段差が大きくなり、最後の行が切られることがあります
波の色と、下の区切りの色が合っているか。SVGの fill と、つぎの区切りの背景色が少しでも違うと、境目に色のずれが見えます。拡大・縮小して、細いすき間が出ないかも見ます
動きがずっと続いていないか。「波を動かして」と頼むと、止まらない動きが返ってくることがあります。5秒で止める、動きを減らす設定で止める、のどちらも入っているかを見ます