CSS - shape()

目次

概要

形式shape(...)
サポートhttps://caniuse.com/mdn-css_types_basic-shape_shape

説明

使用例

CSS
.my-example {
  width: 100px;
  height: 100px;
  clip-path: shape(
    from 30px 0,                          /* 30, 0 から */
    hline by 40px,                        /* 40 右へ直線 */
    curve to 100px 30px with 100px 0,     /* 100, 0 を制御点として 100, 30 地点まで曲線 */
    vline by 40px,                        /* 40 下へ直線 */
    curve to 70px 100px with 100px 100px, /* 100, 100 を制御点として 70, 100 地点まで曲線 */
    hline by -40px,                       /* 40 左へ直線 */
    curve to 0 70px with 0 100px,         /* 0, 100 を制御点として 0, 70 地点まで曲線
    vline by -40px,                       /* 40 上へ直線 */
    curve to 30px 0 with 0 0              /* 0, 0 を制御点として 30, 0 地点まで曲線 */
  );
}
HTML
<img src="example.png" alt="example" class="my-example">
表示
example

コマンド

塗りつぶしルール(<fill-rule>)

塗りつぶしルールを nonzero または evenodd のいずれかで指定します。省略した場合は nonzero と見なされます。詳細は MDN(↗) の説明を参照してください。

clip-path: shape(
  evenodd
  ...
);

開始点(from)

開始点を指定します。top, left などの位置名や、30px などの長さ、30% などのパーセントを指定できます。先頭または <fill-rule> の後ろに1度だけ記述します。省略できません。

clip-path: shape(
  from top left,
  ...
);

移動(move)

移動します。to は絶対座標、by は相対座標で移動先を指定します。

clip-path: shape(
  ...
  move to 30px 50px,     /* (30,30) の位置に移動 */
  move by 30px 50px,     /* 右に 30px, 下に 50px 移動 */
);

直線(line)

直線を引きます。

clip-path: shape(
  ...
  line to 30px 50px,     /* (30,30) の位置まで直線 */
  line by 30px 50px,     /* 右に 30px, 下に 50px 直線 */
);

水平線(hline)

水平方向に直線を引きます。

clip-path: shape(
  ...
  hline to 30px,     /* X=30px の位置まで水平線 */
  hline to right,    /* 右端まで水平線 */
  hline by 30px,     /* 右に 30px 水平線 */
  hline by -30px,    /* 左に 30px 水平線 */
);

垂直線(vline)

垂直方向に直線を引きます。

clip-path: shape(
  ...
  vline to 30px,     /* Y=30px の位置まで垂直線 */
  vline to bottom,   /* 下端まで垂直線 */
  vline by 30px,     /* 下に 30px 垂直線 */
  vline by -30px,    /* 上に 30px 垂直線 */
);

曲線(curve)

現在の位置から終点と制御点を指定してベジェ曲線を引きます。制御点に関しては SVG:path を参照してください。from には開始点(start)、終点(end)、shape-outside で制御される基準ボックスの左上(origin) のいずれかを指定します。

clip-path: shape(
  ...
  /* (0,100) を終点、(100,50) を制御点として曲線 */
  curve to 0 100px with 100px 50px,
  /* 右に0、下に 100 移動した地点を終点、(100,50) を制御点として曲線 */
  curve by 0 100px with 100px 50px,
  /* 制御点の位置を開始点からの相対位置で指定 */
  curve by 0 100px with 100px 50px from start,
  /* (0,100) を終点、(100,30) を第1制御点、(100,70) を第2制御点として曲線 */
  curve to 0 100px with 100px 30px / 100px 70px,
);

スムーズ線(smooth)

現在の位置から終点と制御点を指定してスムーズな曲線を引きます。前の直線や曲線との繋ぎ目がスムーズになるように工夫されます。

clip-path: shape(
  ...
  /* 前の曲線から制御点を自動計算し、(0,100) を終点として曲線 */
  smooth to 0 100px,
  /* 0,100 を終点、100,50 を制御点として曲線 */
  smooth to 0 100px with 100px 50px,
  /* 右に0、下に 100 移動した地点を終点、(100,50) を制御点として曲線 */
  smooth by 0 100px with 100px 50px,
  /* 制御点の位置を開始点からの相対位置で指定 */
  smooth by 0 100px with 100px 50px from start,
);

円弧(arc)

二つの楕円から求められる円弧を引きます。

clip-path: shape(
  ...
  /* (70,40) を p1, (130,70) を p2 として... */
  move to 70px 40px,
  arc to 130px 70px of 60px 30px cw large,
  /* 楕円を 30度 回転させる */
  arc to 100px 80px of 20px 10px cw small rotate 30deg,
);

上記の例は、(70,40) を p1、(130,70) を p2 として、この2点を通過する長半径 60、短半径 30 の2個の楕円を描き、右回り(cw)方向の円弧の長い方(large)の円弧を描きます。方向は 右回り(cw) または 左回り(ccw) で省略時は ccw となります。長い方の円弧は large、短い方の円弧は small で省略時は small となります。rotate は楕円を指定した角度分回転させます。

example 70, 40 130, 70 30 60 cw large
example 70, 40 130, 70 30 60 ccw large
example 70, 40 130, 70 30 60 cw small
example 70, 40 130, 70 30 60 ccw small

クローズ(close)

close はパスを閉じます。

clip-path: shape(
  ...
  close
);

仕様詳細

shape(<fill-rule>? from <position>, <shape-command>#)

<fill-rule> = nonzero | evenodd

<shape-command> =
    <move-command>
  | <line-command>
  | <horizontal-line-command>
  | <vertical-line-command>
  | <curve-command>
  | <smooth-command>
  | <arc-command>
  | close

<move-command> =
  move <command-end-point>
<line-command> =
  line <command-end-point>
<horizontal-line-command> =
  hline
    [ to [ <length-percentage> | left | center | right | x-start | x-end ]
    | by <length-percentage> ]
<vertical-line-command> =
  vline
    [ to [ <length-percentage> | top | center | bottom | y-start | y-end ]
    | by <length-percentage> ]
<curve-command> =
  curve
    [ [ to <position> with <control-point> [ / <control-point> ]? ]
    | [ by <coordinate-pair> with <relative-control-point> [ / <relative-control-point> ]? ] ]
<smooth-command> =
  smooth
    [ [ to <position> [ with <control-point> ]? ]
    | [ by <coordinate-pair> [ with <relative-control-point> ]? ] ]
<arc-command> =
  arc <command-end-point>
    [ [ of <length-percentage>{1,2} ]
    && <arc-sweep>? && <arc-size>? && [rotate <angle>]? ]

<command-end-point> = [ to <position> | by <coordinate-pair> ]
<control-point> = [ <position> | <relative-control-point> ]
<relative-control-point> = <coordinate-pair> [ from [ start | end | origin ] ]?
<coordinate-pair> = <length-percentage>{2}
<arc-sweep> = cw | ccw
<arc-size> = large | small
Copyright (C) 2025 杜甫々
初版：2025年4月6日、最終更新：2025年4月6日
http://www.tohoho-web.com/css/func/shape.htm