上のセクションの下の端を 波の形（SVGをマスクに使用） で切り抜いています。切り抜いた所からは、すぐ下のセクションがのぞきます（margin-bottom をマイナスにして、下のセクションを潜り込ませています）。下のセクションの色や写真が何でもそのまま使えます。.cs-dv01__next は見本用の「下のセクション」なので、実際は自分のセクションに置き換え、上の余白（padding-top）を形の高さより大きくしてください。波の数は「波の幅」で変えられます。
DIVIDER
セクションの区切り線・境目のCSS素材
色の違うセクションの境目や、文章の途中に入れる区切り線です。波や斜めの形も画像を使わず描いています。
11種類
上のセクションの下の端を clip-path で斜めに で切り抜いています。切り抜いた所からは、すぐ下のセクションがのぞきます（margin-bottom をマイナスにして、下のセクションを潜り込ませています）。下のセクションの色や写真が何でもそのまま使えます。.cs-dv02__next は見本用の「下のセクション」なので、実際は自分のセクションに置き換え、上の余白（padding-top）を形の高さより大きくしてください。右下がりにしたいときは、polygon の2番目と4番目の値を入れ替えます。
上のセクションの下の端を ギザギザ（conic-gradient のマスク） で切り抜いています。切り抜いた所からは、すぐ下のセクションがのぞきます（margin-bottom をマイナスにして、下のセクションを潜り込ませています）。下のセクションの色や写真が何でもそのまま使えます。.cs-dv03__next は見本用の「下のセクション」なので、実際は自分のセクションに置き換え、上の余白（padding-top）を形の高さより大きくしてください。「ギザの大きさ」でギザギザの細かさが変わります。
上のセクションの下の端を clip-path で中央がとがった形に で切り抜いています。切り抜いた所からは、すぐ下のセクションがのぞきます（margin-bottom をマイナスにして、下のセクションを潜り込ませています）。下のセクションの色や写真が何でもそのまま使えます。.cs-dv04__next は見本用の「下のセクション」なので、実際は自分のセクションに置き換え、上の余白（padding-top）を形の高さより大きくしてください。「次へ続く」流れを見せたい所に向いています。
上のセクションの下の角を、横長の楕円で丸めています（border-radius だけ）。切り抜いた所からは、すぐ下のセクションがのぞきます（margin-bottom をマイナスにして、下のセクションを潜り込ませています）。下のセクションの色や写真が何でもそのまま使えます。.cs-dv05__next は見本用の「下のセクション」なので、実際は自分のセクションに置き換え、上の余白（padding-top）を形の高さより大きくしてください。
2つのセクションの間に置く帯です。「上の色」を上のセクションの背景色に、「下の色」を下のセクションの背景色に合わせてください。手前と奥の2枚の波が、逆向きにゆっくり流れます（見本の上の濃い面は見本用です）。
上のセクションの下の端を 大小2種類の円を並べたマスクで雲の形に で切り抜いています。切り抜いた所からは、すぐ下のセクションがのぞきます（margin-bottom をマイナスにして、下のセクションを潜り込ませています）。下のセクションの色や写真が何でもそのまま使えます。.cs-dv07__next は見本用の「下のセクション」なので、実際は自分のセクションに置き換え、上の余白（padding-top）を形の高さより大きくしてください。子ども向け・保育・お菓子など、やさしい雰囲気のページに。
線とひし形はCSSで描いています。文字を入れない場合は <span> の中を空にすると、ひし形だけの区切りになります。
<hr> 1つで描いています。点は radial-gradient なので、ブラウザの点線より丸くそろって見えます。真ん中の矢印は「この先に続きがあります」の合図です。
<hr> 1つで、太い線と細い線を重ねています。新聞やメニュー表のような、きちんとした印象になります。
線の色が中央でいちばん濃く、両端に向かって透明になります。黒い背景の上でも、白い背景の上でも使えます（線の色を背景に合わせて変えてください）。