セクション区切りをCSSとSVGで作る

2024.11.26 09:00
2024.11.26 09:55
セクション区切りをCSSとSVGで作る

ページのセクション区切りをCSSとSVGで作ってみました。
今回は波型のパターンで作りました。

まずはデモ

今まではこれを実現するには画像を使っていましたが、
SVGで実現できるようになったのでかなり便利になりましたね。
ではコードはこちらです。

まずはHTML。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" media="all" href="style.css" />
  <title></title>  
</head>
<body id="top">

  <div class="container">

    <div class="area1">
      <p>
        テキストをここに入れます。テキストをここに入れます。テキストをここに入れます。テキストをここに入れます。テキストをここに入れます。テキストをここに入れます。テキストをここに入れます。
      </p>
    </div>

    <div class="area2">
      <p>
        テキストをここに入れます。テキストをここに入れます。テキストをここに入れます。テキストをここに入れます。テキストをここに入れます。テキストをここに入れます。テキストをここに入れます。
      </p>
    </div>
  </div>
</body>
</html>

シンプルにセクションごとにclassで分けます。
次にCSS。

  .area1 {
    background-color: #cc0000;
    padding-top: 50px;
    height: 200px;
    overflow:hidden;
    position:relative;
  }
  .area1::before { 
    content:'';
    font-family:'shape divider from ShapeDividers.com';
    position: absolute;
    z-index: 3;
    pointer-events: none;
    background-repeat: no-repeat;
    bottom: -0.1vw;
    left: -0.1vw;
    right: -0.1vw;
    top: -0.1vw; 
    background-size: 100% 90px;
    background-position: 50% 0%;  background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M0 .5c3.07.55 9.27-.42 16.14 0 6.88.4 13.75.57 19.14-.11V0H0z" fill="%23ffffff"/></svg>'); 
  }

  .area2 {
    background-color: #333333;
    padding-top: 50px;
    height: 200px;
    overflow:hidden;
    position:relative;
  }
  .area2::before { 
    content:'';
    font-family:'shape divider from ShapeDividers.com';
    position: absolute;
    z-index: 3;
    pointer-events: none;
    background-repeat: no-repeat;
    bottom: -0.1vw;
    left: -0.1vw;
    right: -0.1vw;
    top: -0.1vw; 
    background-size: 100% 90px;
    background-position: 50% 0%;  background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M0 .5c3.07.55 9.27-.42 16.14 0 6.88.4 13.75.57 19.14-.11V0H0z" fill="%23cc0000"/></svg>'); 
  }

  @media (min-width:2100px) {
    .area1::before {
      background-size: 100% calc(2vw + 90px);
    }
    .area2::before {
      background-size: 100% calc(2vw + 90px);
    }
  }

before属性を使って実現します。
色はbackground-colorの部分を変更します。

ポイントは1の色と2:beforeの色を同じにすることです。
ちょっとこんがらがりますが、慣れですね。

他のデザインを作りたい場合は以下のようなツールを使うと便利ですね。
https://www.webcreatorbox.com/blog/section-divider

今回は以上です！