CSS・SVGで作る境界線と背景デザイン｜波、三角形、斜めラインを使ったおしゃれな装飾テクニック

Webデザインでは、ちょっとした工夫で見た目の印象を大きく変えることができます。

その中でもおすすめなのが「境界線」や「背景スタイル」のデザイン。線や背景にアクセントを入れるだけで、シンプルなページもグッとおしゃれに見せられます。

SVG や CSS（clip-path、linear-gradient、mask など）を使って、波・三角形・画像の切り抜き・背景スタイルといったデザインを作る方法を紹介します。

さらにカラムブロックと組み合わせた実例も紹介しているので、そのまま自分のサイトに取り入れることができます。

テーマに依存しない方法なので、Cocoon以外のWordPressテーマでも使えます。

ぜひ参考にしてみてくださいね。

この記事は、HTMLとCSSの基礎を理解されている方を対象とし、トップページ等にアクセントを追加したい方向けの内容です。

INDEX

境界線をカラムブロックと組み合わせる工夫
1. カラムブロックの使い方
2. フルワイドで使う方法（画面幅いっぱいに広げたい場合）
【SVG】を使った波状の境界線
【clip-path】で作る境界線｜三角形・斜めライン
画像を切り抜く｜【clip-path】を使った例
1. 三角形に切り抜き
2. 斜めに切り抜き
画像を切り抜く｜【mask】を使った例
【linear-gradient 】で作るおしゃれな背景スタイル
まとめ

境界線をカラムブロックと組み合わせる工夫

WordPressのブロックエディター（Gutenberg）には「カラムブロック」という便利な機能があります。このカラムブロックに境界線を組み合わせると、セクションを区切ったりデザインにアクセントを加えたりすることが簡単にできます。

例：波状の境界線をカラムブロックの下に追加した場合

カラムブロック
（ここにテキストや画像などのコンテンツ）

▼カラムブロックの下に波状の境界線

カラムブロック下の余白を消すことで、ひとつの大きなセクションとして見せることが可能です。

カラムブロック

カラムブロックの使い方

WordPressの「カラム」ブロックを追加
「1カラム（100）」を選択
中にテキストや画像などを入れて編集

ポイント

直感的にレイアウトを組める
サイドバーから背景色を設定できる（CSS不要）
必要なら「追加CSSクラス」が使える
例）フルワイド設定の追加など

WordPressの「追加CSSクラス」が便利！特定のブロックにだけスタイルを適用する方法

WordPressのブロックエディタで、特定のブロックだけにデザインを追加できることをご存知ですか？実は「追加CSSクラス」機能を使えばとても簡単に実現できます...

フルワイドで使う方法（画面幅いっぱいに広げたい場合）

境界線を画面の端から端まで広げたいときは以下の手順で設定します。

ページタイプ：「１カラム（広い）」に変更
→ サイドバーが非表示になります
境界線に class="cstm-wide" を追加
以下のCSSを追加（子テーマのスタイルシート使用）

body .cstm-wide {
   margin: 0 calc(50% - 50vw);
}

トップページ作成に使う場合は、パディング調整や不要な余白削除など追加の設定も必要です。「フルワイドにする仕組み」と合わせて、こちらの記事で詳しく解説しています。

詳細はこちら

Cocoonでフルワイドデザイン！幅いっぱいにする仕組みとおしゃれに仕上げるポイントを解説

Cocoonはシンプルで使いやすい無料テーマですが、有料テーマ「SWELL」のような洗練されたフルワイドデザイン（全幅デザイン）を実現するには少し工夫が必要です...

カラムブロックをフルワイドにする方法
トップページ作成に必要な調整
→不要な要素の非表示設定
→不要な余白を消す設定ほか

実際にこのセクションをフルワイドに広げています！

以下、境界線スタイルのサンプルとコードを掲載します。

目次に戻る

【SVG】を使った波状の境界線

Webサイトの区切りに「波」の形を入れると柔らかく親しみやすい雰囲気を出せます。たとえば、セクションとセクションの境目や背景と本文を区切る部分に入れると見た目がぐっとオシャレになります。

SVG（エス・ブイ・ジー）は「拡大縮小しても劣化しないベクター画像」のことで、境界線デザインによく使われます。

ここでは、波の境界線をコードをコピペするだけで設置する方法を紹介します。

SVGコードを簡単に作れるツール

SVGのコードを自分で書くのは大変ですが、以下の「波線・曲線SVGジェネレーター」を使えば大丈夫。

【境界線に使える】波線・曲線SVG画像ジェネレーター

波線・曲線のSVG画像を出力するジェネレーターです。プレビューを見ながら波の数や高さ、色などをカスタマイズ可能。セクションやコンテンツの区切り等に使えます。

このツールを使えば…

波の数を増やしたり減らしたりできる
波の高さを調整できる
色を好きな色に変えられる
プレビューを見ながら調整できる

出来上がったら「コードをコピー」してWordPressに貼り付ければOKです。

使い方の流れ（初心者向け）

WordPressのブロックエディターで「カスタムHTMLブロック」を追加
HTMLコードをそのまま貼り付け
プレビューでデザインを確認
色を変えたい場合は fill="#D8E4E5" の部分を好きなカラーコードに変更

波の境界線を仕上げるコツ

色を変える
- HTML内に直接指定する場合 fill="#D8E4E5"
- CSSで指定する場合 fill: #D8E4E5;
形を変える
ジェネレーターでパラメータを調整すると、緩やかな波・大きな波など自由に変更できます。
余白を調整する
波をカラムにピッタリくっつけたいときは、CSSを追加します。（子テーマのスタイルシート使用）

.cstm-wave svg {
   display: block;
}
.up-wave {
   margin-bottom: -1px !important;
}

【SVG】うねうねした波の境界線

下のような「うねうね」とした波を追加できます。

↑カラム上に追加用

↓カラム下に追加用

うねうね｜カラムの上に追加する場合

コードを見る

<div class="cstm-wave up-wave">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 100" width="100%">
  <path d="M -224 41 C 96 41 96 10 416 10 C 736 10 736 59 1056 59 C 1376 59 1376 16 1696 16 L 1280 100 L 0 100 Z" fill="#D8E4E5"></path>
</svg>
</div>

うねうね｜カラムの下に追加する場合

コードを見る

<div class="cstm-wave">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 100" width="100%">
  <path d="M 1696 59 C 1376 59 1376 90 1056 90 C 736 90 736 41 416 41 C 96 41 96 84 -224 84 L 0 0 L 1280 0 Z" fill="#D8E4E5"></path>
</svg>
</div>

【SVG】もこもこの境界線

「もこもこ」とした曲線を使うとかわいらしく柔らかい印象を出せます。子ども向けサイトや、やさしい雰囲気にしたいページにピッタリです。

↑カラム上に追加用

↓カラム下に追加用

もこもこ｜カラムの上に追加する場合

コードを見る

<div class="cstm-wave up-wave">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 100" width="100%">
  <path d="M 0 50 Q 128 -50 256 50 Q 384 -50 512 50 Q 640 -50 768 50 Q 896 -50 1024 50 Q 1152 -50 1280 50 L 1280 100 L 0 100 Z" fill="#D8E4E5"></path>
</svg>
</div>

もこもこ｜カラムの下に追加する場合

コードを見る

<div class="cstm-wave">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 100" width="100%">
  <path d="M 0 50 Q 128 150 256 50 Q 384 150 512 50 Q 640 150 768 50 Q 896 150 1024 50 Q 1152 150 1280 50 L 1280 0 L 0 0 Z" fill="#D8E4E5"></path>
</svg>
</div>

【SVG】ジグザグの境界線

「ジグザグ」や「ギザギザ」の線を使うと、シャープで元気な印象を出せます。アクティブな雰囲気にしたいページや、見出しを強調したいときにおすすめです。

ジグザグ・ギザギザSVG画像ジェネレーターを使えば、山の数や高さ、色を自由にカスタマイズできます。

【境界線に使える】ジグザグ・ギザギザSVG画像ジェネレーター

ジグザグのSVG画像を出力するジェネレーターです。プレビューを見ながら山の数や高さ、色などをカスタマイズ可能。セクションやコンテンツの区切り等に使えます。

↑カラム上に追加用

↓カラム下に追加用

ジグザグ｜カラムの上に追加する場合

コードを見る

<div class="cstm-wave up-wave">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 100" width="100%">
  <path d="M 0 50 L 128 0 L 256 50 L 384 0 L 512 50 L 640 0 L 768 50 L 896 0 L 1024 50 L 1152 0 L 1280 50 L 1280 100 L 0 100 Z" fill="#D8E4E5"></path>
</svg>
</div>

ジグザグ｜カラムの下に追加する場合

コードを見る

<div class="cstm-wave">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 100" width="100%">
  <path d="M 0 50 L 128 100 L 256 50 L 384 100 L 512 50 L 640 100 L 768 50 L 896 100 L 1024 50 L 1152 100 L 1280 50 L 1280 0 L 0 0 Z" fill="#D8E4E5"></path>
</svg>
</div>

目次に戻る

【clip-path】で作る境界線｜三角形・斜めライン

CSS の clip-path を使うと、要素を「三角形」や「斜めカット」など自由な形に切り抜けます。区切り線に使うと、シンプルなのに動きのあるデザインに仕上がります。

↑カラム上に追加用

↓カラム下に追加用

clip-pathの基本

clip-path … 要素を指定した形で切り抜くCSSプロパティ
polygon() … 多角形を定義できる関数
書き方 → polygon(x1 y1, x2 y2, x3 y3, …)
座標の基準 → 左上が (0 0)、右下が (100% 100%)

三角形の境界線

三角形｜カラム上に追加（上が尖った三角形）

コードを見る

<div class="cstm-clip-upper-kaku"></div>

/* 三角形 上 */
.cstm-clip-upper-kaku {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  height:10vmin;
  background-color:#D8E4E5; /* 背景色 */
  margin-bottom: 0; /* 下部余白を0にする */
}

三角形｜カラム下に追加（下が尖った三角形）

コードを見る

<div class="cstm-clip-lower-kaku"></div>

/* 三角形 下 */
.cstm-clip-lower-kaku {
  clip-path: polygon(100% 0, 0 0, 50% 100%);
  height:10vmin;
  background-color:#D8E4E5; /* 背景色 */
}

斜めの境界線（右上がり）

↑カラム上に追加用

↓カラム下に追加用

斜め（右上がりタイプ）｜カラム上に追加

コードを見る

<div class="cstm-clip-upper-r"></div>

/* 斜め（右上がりタイプ）／カラム上に追加用*/
.cstm-clip-upper-r {
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  height:10vmin;
  background-color:#D8E4E5; /* 背景色 */
  margin-bottom: 0; /*下部余白を0にする*/
}

斜め（右上がりタイプ）｜カラム下に追加

コードを見る

<div class="cstm-clip-lower-r"></div>

/* 斜め（右上がりタイプ）／カラム下に追加用*/
.cstm-clip-lower-r {
  clip-path: polygon(0 0, 0% 100%, 100% 0);
  height:10vmin;
  background-color:#D8E4E5; /* 背景色 */
}

斜め（右下がりタイプ）

↑カラム上に追加用

↓カラム下に追加用

斜め（右下がりタイプ）｜カラム上に追加

コードを見る

<div class="cstm-clip-upper"></div>

/* 斜め（右下がりタイプ）／カラム上に追加用*/
.cstm-clip-upper {
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  height:10vmin;
  background-color:#D8E4E5; /* 背景色 */
  margin-bottom: 0; /*下部余白を0にする*/
}

斜め（右下がりタイプ）｜カラム下に追加用

clip-pathプロパティを使用して、要素の下部を右下がりの斜めラインで切り抜いています。

コードを見る

<div class="cstm-clip-lower"></div>

/* 斜め（右下がりタイプ）／カラム下に追加用*/
.cstm-clip-lower {
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  height:10vmin;
  background-color:#D8E4E5; /* 背景色 */
}

目次に戻る

画像を切り抜く｜【clip-path】を使った例

画像をそのまま表示するだけでは単調になりがちですが、CSSのclip-pathプロパティを使うと「三角形」や「斜めカット」など、自由な形に切り抜けます。

サイトの雰囲気を変えたいときにおすすめのテクニックです。

初心者でも安心なのは、オンラインツール「Clippy — CSS clip-path maker」を使う方法です。画面上で形を選んで調整すると、すぐにCSSコードを生成してくれるので、コピー＆ペーストするだけでOK！

Clippy — CSS clip-path maker

三角形に切り抜き

三角形に切り抜き（上向き）

画像を「上に尖った三角形」に切り抜く例です。セクションのタイトル画像や仕切りに使うとアクセントになります。

CONTENTS

コードを見る

<!-- 三角形（上向き） -->
<img src="sample.jpg" alt="三角形に切り抜いた画像" class="clip-triangle-up">

/* 三角形 - 上向き */
.clip-triangle-up {
  clip-path: polygon(100% 0, 100% 100%, 50% 85%, 0 100%, 0 0);
}

三角形に切り抜き｜下向き

斜めに切り抜き（右上がり）

CONTENTS

コードを見る

<!-- 三角形（下向き） -->
<img src="sample.jpg" alt="三角形に切り抜いた画像" class="clip-triangle-down">

/* 三角形 - 下向き */
.clip-triangle-down {
  clip-path: polygon(100% 0, 100% 80%, 50% 100%, 0 80%, 0 0);
}

斜めに切り抜き

斜めに切り抜き｜右上がり

画像を右上がりに切り抜いています。

CONTENTS

コードを見る

<!-- 斜め（右上がり） -->
<img src="sample.jpg" alt="斜めカット（右上がり）の画像" class="clip-slant-up">

/* 斜め - 右上がり */
.clip-slant-up {
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%);
}

斜めに切り抜き｜右下がり

画像を右下がりに切り抜いています。

CONTENTS

コードを見る

<!-- 斜め（右下がり） -->
<img src="sample.jpg" alt="斜めカット（右下がり）の画像" class="clip-slant-down">

/* 斜め - 右下がり */
.clip-slant-down {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
}

目次に戻る

画像を切り抜く｜【mask】を使った例

CSS の mask プロパティを使うと、画像や要素を「波状」や「ギザギザ」など、複雑なパターンで切り抜くことができます。clip-path に似ていますが、透明度を扱えるのが大きな特徴です。部分的に透過させたり、ぼかしを加えたりも可能です。

mask プロパティの特徴

要素の一部を隠せる
マスクで指定した部分は透過され、下の背景が見えます。
画像やグラデーションをマスクに使える
PNG や SVG 画像だけでなく、CSS グラデーションもマスクにできます。
柔軟な表現が可能
波・ギザギザ・ドットなど、clip-path では難しいデザインも簡単。
clip-path との違い
- clip-path: 形を切り抜くだけ（透明度は扱えない）
- mask: 透明度を利用して「部分的な透過」「グラデーション」などリッチな表現が可能

一部のブラウザ（特に Safari）では -webkit-mask の指定が必要です。

手書きで複雑な mask を作るのは大変ですが、以下のオンラインツールを使えばクリック操作でパターンを生成できます。

CCSS Generator for Wavy Shapes & Patterns

Create CSS-only Wavy Shapes & Patterns using CSS mask. Get an optimized & modern...

CSS Generator for Custom Borders (Zig-Zag, Wavy, and more)

Create a Zig-Zag, Scooped, Scalloped and Wavy borders using CSS. Get an optimize...

波状に切り抜く例

画像を「上下とも波状」にカットするサンプルです。

CONTENTS

コードを見る

<div class="mask-img-top-bottom "></div>

/* maskで切り抜き（波・上下）*/
.mask-img-top-bottom {
 --mask:
   radial-gradient(51.61px at 50% 72px,#000 99%,#0000 101%) calc(50% - 60px) 0/120px 51% repeat-x,
   radial-gradient(51.61px at 50% -42px,#0000 99%,#000 101%) 50% 30px/120px calc(51% - 30px) repeat-x,
   radial-gradient(51.61px at 50% calc(100% - 72px),#000 99%,#0000 101%) calc(50% - 60px) 100%/120px 51% repeat-x,
   radial-gradient(51.61px at 50% calc(100% + 42px),#0000 99%,#000 101%) 50% calc(100% - 30px)/120px calc(51% - 30px) repeat-x;
  -webkit-mask: var(--mask);
   mask: var(--mask);
}

ギザギザに切り抜く例

「上下がギザギザの境界線」になるサンプルです。

CONTENTS

コードを見る

<div class="mask-img2-top-bottom"></div>

/* maskで切り抜き（ギザギザ・上下）*/
.mask-img-top-bottom {
   --mask: 
   conic-gradient(from 115deg at top,#0000,#000 1deg 129deg,#0000 130deg) top/128.67px 51% repeat-x,
   conic-gradient(from -65deg at bottom,#0000,#000 1deg 129deg,#0000 130deg) bottom/128.67px 51% repeat-x;
  -webkit-mask: var(--mask);
   mask: var(--mask);
}

ポイント

clip-path では難しい「波」や「ギザギザ」も mask なら簡単。
背景色や背景画像を組み合わせればデザインの幅が広がる。
ブラウザ対応のために -webkit-mask を忘れずに。

複雑なパターンを自動生成してくれるジェネレーターがとても便利なので、いろいろ試してみてください！

目次に戻る

【linear-gradient 】で作るおしゃれな背景スタイル

セクション内の背景にグラデーションを使うと、アクセントが効いてぐっとオシャレに見えます。

linear-gradient は CSS のプロパティのひとつで、背景に線状のグラデーションを適用できます。

グラデーションとは「色がなめらかに変化する効果」のこと。指定した2色以上のカラーを一定の方向に向かって切り替えていくことができます。

基本構文

background-image: linear-gradient(方向, 色1, 色2, ...);

方向：グラデーションの始まる方向（例：45deg、-90deg、to right、to top）
色1, 色2, …：使用する色を2色以上で指定

斜めの背景

斜めの切り替えをつけると、柔らかい印象の背景になります。

斜めの背景

CSSコピペ
セクション枠にクラス「bg-diagonal」追加

HTML にクラス bg-diagonal を追加してください。

コードを見る

<div class="bg-diagonal"></div>

/* 斜めの背景 */
.bg-diagonal {
   --bg-color:#D8E4E5;
   --white: #fff;
   background-image: linear-gradient(-45deg, var(--bg-color) 0%, var(--bg-color) 60%, var(--white) 50%, var(--white) 100%);
}

ぼかしたグラデーション背景

グラデーションを「にじませる」ことで、より自然な色の移り変わりになります。

ぼかしたグラデーション背景

CSSコピペ
セクション枠にクラス「bg-gradation」追加

HTML にクラス bg-gradation を追加。

コードを見る

<div class="gradation"></div>

/* 背景にぼかしたグラデーション */
.bg-gradation {
   --bg-color:#D8E4E5;
   --white: #fff;
   background-image: linear-gradient(-45deg, var(--bg-color) 0%, var(--bg-color) 50%, var(--white) 70%, var(--white) 100%);
}

直角の背景

直角に色を切り替えると、はっきりした印象になります。

直角の背景

CSSコピペ
セクション枠にクラス「bg-square」追加

HTML にクラス bg-square を追加。

コードを見る

<div class="bg-square"></div>

/* 直角にした背景 */
.bg-square {
   --bg-color:#D8E4E5;
   --white: #fff;
   background-image: linear-gradient(-90deg, var(--bg-color) 0%, var(--bg-color) 60%, var(--white) 50%, var(--white) 100%);
}

カラーの他に、linear-gradientの％部分の数字を変えると、ぼかしや色をつける範囲などを調整できます。いろいろ試してみてください。

目次に戻る

まとめ

【clip-path】【linear-gradient】【mask】【SVG】を活用した境界線や背景スタイルの作り方を紹介しました。これらの技術を使えばシンプルなデザインにアクセントを加えることができます。

スキン「grayish」を製作されたななふさんに了承をいただき、下記サイトに掲載されているいくつかのスタイルを抜粋してお届けしました。

フロントページ向けのブロックパターン詰め合わせ(デモページあり）※Cocoon ver2.8.5.1へアップデート後はプラグインもアップデートしてください

ブログのフロントページによくあるセクション（About、Pickup、NewPost、Rankingなど）別にすぐに使えるパターンデータを用意しました。パターン...

このサイトではCocoonテーマのサイト型トップページの作り方を紹介しています。ぜひこのページの工夫を取り入れ自分だけのオリジナルデザインを作り上げてくださいね。

超簡単！Cocoonのブロック機能でサイト型トップページを作る方法

2025.9.10更新実例集にBibroom(ビブルーム)を掲載しました。Cocoonでオリジナルのトップページを作りたいけど、どこから始めればいいの？そんな...

Cocoonで作るサイト型トップページ｜オシャレなSWELL風（HTML、CSS使用）

2025.9.5 実例集にmomlog（まむろぐ）を掲載しました。トップページが平凡で、他のサイトと差がつかない…そんなお悩みありませんか？この記事では、Wor...

目次に戻る

Comment 記事の感想を書き込んでいただけると幸いです

maninoe より:

2025年9月13日 15:52

初めまして。
「超簡単！Cocoonのブロック機能でサイト型トップページを作る方法」を購入し、トップページの作成を進めています。
こちらのページの波形デザインを導入したく、挑戦していますが上手くいきません。作成中のページはまだ公開していないため現状のスクショを添付いたしますので、ご教示いただけると幸いです。

【状況】
ブロックエディタでカラム上の波形を追加しようと、カラム追加→フルワイド化の手順を行う。
その上で、こちらのページにある波形（なみなみ）のdivコードを、コードエディタでカラムの箇所にコピペ追加しました。

その現状がスクショした画像になります。
編集画面でもエラーのようなものが出ていて、プレビューすると波形部分が右上の方に小さく表示されてしまいます。

divコードを追加する場所がよくわからず、間違っているのかなと考えたのですがやはりよくわからず、質問させていただきました。
大変お手数ですが、教えていただけますと幸いです。よろしくお願いします。

返信
- はるみより:
  
  2025年9月13日 17:00
  
  > maninoeさん
  
  メールにてお返事いたしました。
  ご確認よろしくお願いいたします。

　コメントをキャンセル

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

お問い合わせにあたり

カスタマイズに関するお問い合わせは、必ず対象のサイトURLをご入力ください【必須】
- サイトURLが記載されていない場合は検証ができないため、ご対応いたしかねます。
- 公開記事の内容以外（ソースコードの応用や反映されない原因の調査など）には対応できませんので、あらかじめご了承ください。

返信には数日～1週間ほどお時間をいただく場合があります。

コメント ※

名前 ※

メール ※

サイト

添付ファイルアップロードファイルの最大サイズ: 5 MB。画像, 音声, 動画, 文書, スプレッドシート, 対話型, テキスト, アーカイブ, コード, その他をアップロードできます。 Youtube、Facebook、Twitter および他サービスへのリンクは自動的にコメント内に埋め込まれます。ここにファイルをドロップ

日本語が含まれない内容は投稿できません。