Lism Tips

ShapeDivider（形の区切り）

ShapeDivider は、セクションとセクションの境目を、波や斜めの線などの形で区切る UI コンポーネントです。高さ・反転・ずらし方の指定をまとめます。

ShapeDivider は、セクションとセクションの境目（ページの中のまとまりと、次のまとまりのあいだ）を、波や山などの形で区切るコンポーネントです。形は SVG（点と線で形を描く画像の書き方）で描きます。

どんなときに使う？#

  • 色の違うセクションの境目を、まっすぐな線ではなく、波の形などでつなぎたいとき
  • 形を置かずに、同じ高さのすきまだけを空けたいとき（空の ShapeDivider）

ふつうの区切り線なら a--divider（区切り線） で足ります。

使い方#

b--shapeDivider の箱の中に b--shapeDivider_inner を置き、その中に b--shapeDivider_svg を付けた svg を入れます。svg には preserveAspectRatio="none"（形を幅いっぱいに伸ばす指定）と fill="currentColor"（文字の色で塗る指定）を付けます。形そのもの（path）は自分で用意します。

表示例

上のセクション

下のセクション

html
<div class="l--stack">
  <p class="-p:30 -bgc:base-2">上のセクション</p>
  <div class="b--shapeDivider -max-sz:full -c" style="--c:var(--base-2)" aria-hidden="true" data-flip="Y">
    <div class="b--shapeDivider_inner">
      <svg class="b--shapeDivider_svg" viewBox="0 0 100 10" width="100%" height="100%" fill="currentColor" focusable="false" preserveAspectRatio="none">
        <path d="M0,10 L0,5 Q25,0 50,5 T100,5 L100,10 Z"></path>
      </svg>
    </div>
  </div>
  <p class="-p:30">下のセクション</p>
</div>

この例では、上のセクションと同じ色（--c:var(--base-2)）で波を塗り、data-flip="Y" で上下を逆さにして、上の箱から波が垂れ下がるように見せています。

クラス 付ける場所
b--shapeDivider いちばん外側の箱。高さを決める
b--shapeDivider_inner 中の箱。反転・ずらし・伸ばしはここに効く
b--shapeDivider_svg 形を描く svg

形は飾りなので、外側の箱に aria-hidden="true"（読み上げソフトに読ませない指定）を付けます。

高さを決める（--level）#

高さは --level で決めます。初期値は 5 です。高さは外側の箱（コンテナ）の幅に合わせて変わります。幅が 500px のときに最も低く、1200px のときに最も高くなるように作られていて、--level が 5 なら、いちばん低いときで 25px（5px × 5）、いちばん高いときで 60px（12px × 5）です。

表示例

html
<div class="l--stack -g:20">
  <div class="b--shapeDivider -max-sz:full -c" style="--c:var(--base-2);--level:2" aria-hidden="true">
    <div class="b--shapeDivider_inner">
      <svg class="b--shapeDivider_svg" viewBox="0 0 100 10" width="100%" height="100%" fill="currentColor" focusable="false" preserveAspectRatio="none">
        <path d="M0,10 L0,5 Q25,0 50,5 T100,5 L100,10 Z"></path>
      </svg>
    </div>
  </div>
  <div class="b--shapeDivider -max-sz:full -c" style="--c:var(--base-2);--level:8" aria-hidden="true">
    <div class="b--shapeDivider_inner">
      <svg class="b--shapeDivider_svg" viewBox="0 0 100 10" width="100%" height="100%" fill="currentColor" focusable="false" preserveAspectRatio="none">
        <path d="M0,10 L0,5 Q25,0 50,5 T100,5 L100,10 Z"></path>
      </svg>
    </div>
  </div>
</div>

指定できるもの#

指定 決めること 初期値
--level 形の高さの段階（正の数） 5
--inner-offset 形を横にずらす量 0px
--inner-stretch 形を横に引き伸ばす倍率 1
data-flip 反転する向き。X（左右）・Y（上下）・XY（両方） なし
data-has-animation true にすると、形が左右にゆっくり動き続ける なし
ヒント

data-flip を使えば、同じ形の path を、セクションの上と下の両方で使い回せます。上用と下用に別の形を用意してもかまいません。

空にしてすきまとして使う#

中に b--shapeDivider_inner を入れず、外側の箱だけを置くと、形の無いすきまになります。高さは --level で同じように決められるので、片側だけに形を置いたときに、反対側の余白を同じ高さにそろえるのに便利です。

表示例

上は形の無いすきま、下は波の形です。

html
<div class="l--box -bgc:base-2">
  <div class="b--shapeDivider -max-sz:full" style="--level:3" aria-hidden="true"></div>
  <p class="-px:20">上は形の無いすきま、下は波の形です。</p>
  <div class="b--shapeDivider -max-sz:full -c:base" style="--level:3" aria-hidden="true">
    <div class="b--shapeDivider_inner">
      <svg class="b--shapeDivider_svg" viewBox="0 0 100 10" width="100%" height="100%" fill="currentColor" focusable="false" preserveAspectRatio="none">
        <path d="M0,10 L0,5 Q25,0 50,5 T100,5 L100,10 Z"></path>
      </svg>
    </div>
  </div>
</div>

形を動かす#

外側の箱に data-has-animation="true" を付けると、形が横に 4 倍に伸び、左右に動きます。片道は 12 秒で、行ったり来たりをずっと繰り返します。伸びた形がまわりにはみ出さないよう、表示例では包む箱に -ov:hidden（はみ出しを隠す）を付けています。

表示例

html
<div class="l--box -bgc:base-2 -pt:30 -ov:hidden">
  <div class="b--shapeDivider -max-sz:full -c:base" style="--level:5" aria-hidden="true" data-has-animation="true">
    <div class="b--shapeDivider_inner">
      <svg class="b--shapeDivider_svg" viewBox="0 0 100 10" width="100%" height="100%" fill="currentColor" focusable="false" preserveAspectRatio="none">
        <path d="M0,10 L0,5 Q25,0 50,5 T100,5 L100,10 Z"></path>
      </svg>
    </div>
  </div>
</div>

形を少しずらす#

同じ形を上と下で反転させるだけだと、見た目が少し不自然になることがあります。そのときは --inner-stretch で横に少し伸ばし、--inner-offset で横にずらすと、自然に見せられます。

html
<div class="b--shapeDivider -max-sz:full -c:base" style="--level:8;--inner-offset:-5%;--inner-stretch:1.1" aria-hidden="true" data-flip="Y">
  <div class="b--shapeDivider_inner">
    <svg class="b--shapeDivider_svg" viewBox="0 0 100 10" width="100%" height="100%" fill="currentColor" focusable="false" preserveAspectRatio="none">
      <path d="..."></path>
    </svg>
  </div>
</div>

しくみ#

css
.b--shapeDivider {
  --level: 5;
  --inner-offset: 0px;
  --inner-stretch: 1;
  --_flipX: 1;
  --_flipY: 1;
  height: clamp(calc(5px * var(--level)), calc(1cqw * var(--level)), calc(12px * var(--level)));
  overflow: visible;
}
.b--shapeDivider:where([data-flip^='X']) {
  --_flipX: -1;
}
.b--shapeDivider:where([data-flip$='Y']) {
  --_flipY: -1;
}
.b--shapeDivider_inner {
  --offsetY: 0.5px;
  --offsetX: -0.5px;
  height: 100%;
  width: calc(100% + 1px);
  scale: calc(var(--_flipX) * var(--inner-stretch)) var(--_flipY);
  translate: calc(var(--offsetX) + var(--inner-offset)) calc(var(--offsetY) * var(--_flipY));
}
.b--shapeDivider_svg {
  display: block;
}
  • 高さは clamp()（最小・ふつう・最大の3つから決める CSS の関数）で決まります。まん中の 1cqw は、外側の箱（コンテナ）の幅の 1% です
  • 反転は、外側の箱ではなく b--shapeDivider_inner に対して行います。外側を反転すると、横にすきまができてしまうためです
  • 内側の箱を少し広げ、0.5px ずらしているのは、となりのセクションとのあいだに細いすきまが見えないようにするためです

React・Astro で書く場合#

@lism-css/ui/react/ShapeDivider（Astro は @lism-css/ui/astro/ShapeDivider）から読み込みます。path は子要素として渡します。

jsx
import { ShapeDivider } from '@lism-css/ui/react/ShapeDivider';

<ShapeDivider viewBox="0 0 100 10" level="4" flip="XY">
  <path d="..." />
</ShapeDivider>
Props 決めること
viewBox 出す svg の viewBox
level 高さの段階（正の数。初期値 5）
offset 横にずらす量（--inner-offset になる）
stretch 横に伸ばす倍率（--inner-stretch になる）
flip "X"・"Y"・"XY" で反転の向き
isEmpty 形を出さず、すきまとして使う
isAnimation 動きを付ける（data-has-animation="true" になる）

関連するページ#

公式ドキュメント

2026年10月5日時点の内容（lism-css 1.0.1・@lism-css/ui 0.40.1）をもとに、やさしい日本語でまとめています。

ページの一覧