【CSS】波形の背景を実装する

2023年6月14日

うねうねした波形の背景を実装したいなぁ･･･

というわけで今回はCSSで波形の背景を実装する方法です。
柔らかいイメージがあるので、ＰＯＰなＨＰや女性向けのＨＰなどでは良く使われていますね♪

波形の背景を実装する方法

では早速コードを見て行きましょう！！

See the Pen 波形を作ってみよう！ by そす (@Sosgoyo) on CodePen.

HTML側は「container」「wave」「text」と3つの要素しかありません。
ここでポイントとなるのは「wave」です。

疑似要素を使って波形を作る

では、「wave」のCSSを見て行きましょう！！

.wave {
  position: absolute;
  height: 125px;
  width: 100%;
  background: cornflowerblue;
  bottom: 0;
}

.wave::before, .wave::after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
}

.wave::before {
  width: 55%;
  height: 109%;
  background-color: #fff;
  right: -1.5%;
  top: 60%;
}
.wave::after {
  width: 55%;
  height: 100%;
  background-color: cornflowerblue;
  left: -1.5%;
  top: 40%;
}

waveにbeforeとafterの疑似要素を付けて波形を作っています。
この疑似要素で何をしているかわかりやすい様に、疑似要素の色を赤色にしてみましょう↓

See the Pen ブログ用　波形の背景を作ってみよう！ by そす (@Sosgoyo) on CodePen.

どうでしょう。左の赤い楕円がafter、右の赤い楕円がbeforeです。
afterの下の曲線とbeforeの上の曲線をなぞればうまく波形になってますね。
つまり、afterを青背景、beforeを白背景にすれば波形に見える！という感じです。