SWELL風の波境界線を追加する方法

はじめに
ダウンロード
完成イメージ
実装手順
参考：コンテンツを切り抜き表示する方法
- maskを使用して実現
- clip-pathを使用して実現
さいごに

参考：コンテンツを切り抜き表示する方法

以下の内容では、2つの方法を用いてコンテンツを切り抜いて表示します。

https://cocoon-grayish.na2-factory.com/for-frontpage-blkpattern-maskzig/

maskを使用して実現

以下を使用してmaskで「なみなみ」「ギザギザ」を作成します（図4参照）。

CSS Generators: Your CSS code with less effort

A wide range of CSS Generators to build the future of the web. Add your setting, get your CSS code.

実装手順

以下の手順で実装します。

ラベル
Gutenbergエディターでの設定
Gutenbergエディター
1. 「カラム」ブロックを配置します。
2. カラムを1カラムに設定します。
3. 高度な設定→追加CSSクラスにwide boxと入力します。
4. スタイル→背景を選択し色を設定します。
5. 作成したカラムの中にさまざまなブロックを配置して作成します。

ラベル

CSSを追加

以下のコードをstyle.cssに追加します。

なみなみ

/* ワイドブロック */
.body .wide {
  margin: 0 calc(50% - 50vw);
  padding: 30px calc(50vw - 50%);
}

/* なみなみ */
.box {
  --mask:
    radial-gradient(2.33vmin at 50% 3.2vmin, #000 99%, #0000 101%) calc(50% - 4vmin) 0/8vmin 51% repeat-x,
    radial-gradient(2.33vmin at 50% -1.2vmin, #0000 99%, #000 101%) 50% 2vmin/8vmin calc(51% - 2vmin) repeat-x,
    radial-gradient(2.33vmin at 50% calc(100% - 3.2vmin), #000 99%, #0000 101%) calc(50% - 4vmin) 100%/8vmin 51% repeat-x,
    radial-gradient(2.33vmin at 50% calc(100% + 1.2vmin), #0000 99%, #000 101%) 50% calc(100% - 2vmin)/8vmin calc(51% - 2vmin) repeat-x;
  mask: var(--mask);
}

ギザギザ

/* ワイドブロック */
.body .wide {
  margin: 0 calc(50% - 50vw);
  padding: 30px calc(50vw - 50%);
}

/* ギザギザ */
.box  {
  --mask: 
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top/4vmin 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/4vmin 51% repeat-x;
  mask: var(--mask);
}

clip-pathを使用して実現

以下を使用してclip-pathで「斜め上下」を作成します（図6参照）。

Clippy — CSS clip-path maker

実装手順

以下の手順で実装します。

ラベル
Gutenbergエディターでの設定

「maskを使用して実現」と同様です。

ラベル

CSSを追加

以下のコードをstyle.cssに追加します。

/* ワイドブロック */
.body .wide {
  margin: 0 calc(50% - 50vw);
  padding: 5vw calc(50vw - 50%);
}

/* 斜め上下 */
.box {
  clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);
}

さいごに

今回紹介した方法を使えば、SWELL風の波境界線をカラムブロックで簡単に追加できます。
また、紹介したツールを活用することで、さまざまな境界線を実現でき、デザインに個性を加えることができます。