rect()

Baseline 2024

Newly available

Since January 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

rect() は CSS 関数で、包含ブロックの上端と左端から指定した距離に矩形を作成します。これは <basic-shape> データ型の基本シェイプ関数です。rect() 関数を offset-path のような CSS プロパティで使用し、要素が移動する矩形のパスを作成したり、 clip-path でクリッピング領域の形状を定義したりすることができます。

構文

css
offset-path: rect(0 1% auto 3% round 0 1px);
clip-path: rect(50px 70px 80% 20%);

値

内側の矩形を定義するには、上端のオフセットから時計回りに 4 つのオフセット値を指定し、オプションで round キーワードと border-radius 引数を指定します。それぞれのオフセット値には <length>, <percentage>, またはキーワード auto を指定することができます。

<length-percentage>

矩形の上下左右の端と、包含ブロックの上端または左端からの距離 <length-percentage> 値を指定します。最初の値（上端）と 3 つ目の値（下端）は、包含ブロックの上端からの距離であり、 2 つ目の値（右端）と 4 つ目の値（左端）は、包含ブロックの左端からの距離です。2 つ目（右）と 3 つ目（下）の値は、それぞれ 4 つ目（左）と 1 つ目の値（上）によってクランプされ、下端が上端を越えたり、右端が左端を越えたりするのを防ぎます。例えば、 rect(10px 0 0 20px) は rect(10px 20px 10px 20px) にクランプされます。

auto

この値が用いられる辺を、包含ブロックの対応する辺と一致させます。最初の値（上）または4番目の値（左）に auto が使用された場合、 auto の値は 0 となり、 2 つ目（右）または 3 つ目（下）に使用された場合、 auto の値は 100% となります。

round <'border-radius'>

CSS は border-radius の一括指定プロパティと同じ構文を用いて、矩形の角の丸みの半径を指定します。この引数はオプションです。

形式文法

<rect()> =
rect( [ <length-percentage> | auto ]{4} [ round <'border-radius'> ]? )

<length-percentage> =
<length> |
<percentage>

<border-radius> =
<length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?
この構文は CSS Borders and Box Decorations Module Level 4, CSS Shapes Module Level 1, CSS Values and Units Module Level 4 による最新の標準を反映しています。すべてのブラウザーがすべての部分を実装しているわけではありません。サポート情報についてはブラウザーの互換性を参照してください。

例

offset-path を rect() で作成

この例では、 offset-path プロパティで rect() 関数を使用して、要素（この例では赤枠）が移動する経路の図形を定義しています。それぞれ異なる rect() 関数の値を使用しています。ボックス内の矢印はボックスの右端を指しています。

html
<div class="container">
  Rectangular path 1
  <div class="path rect-path-1">→</div>
</div>
<div class="container">
  Rectangular path 2
  <div class="path rect-path-2">→</div>
</div>
<div class="container">
  Rectangular path 3
  <div class="path rect-path-3">→</div>
</div>

css
.container {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  margin: 15px;
  text-align: center;
}

.path {
  width: 40px;
  height: 40px;
  background-color: red;
  position: absolute;
  animation: move 10s linear infinite;
}

.rect-path-1 {
  offset-path: rect(50px 150px 200px 50px round 20%);
}

.rect-path-2 {
  offset-path: rect(50px auto 200px 50px round 20%);
}

.rect-path-3 {
  offset-path: rect(50px auto 200px auto);
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

結果

パス 1 の矩形は、包含ブロックからの 4 つの辺（上、右、下、左）の距離を指定しています。上端と下端の値は、包含ブロックの上端からの距離です。右と左の値は、包含ブロックの左端からの距離です。さらに、矩形の角は 20% に丸められ、赤いボックス要素はこのパスに沿って移動するとき、丸められた角に沿うようになります。ボックス内の矢印が、矩形のパスの角のカーブに沿っていることに注目してください。
パス 2 の矩形はパス 1 の矩形と似ていますが、右の値が auto であり、値 100% と等しい点が異なります。これにより、矩形の右端が包含ブロックの右端に一致し、パス1よりも広い矩形が作成されます。
パス 3 の矩形では、左辺と右辺の引数を auto と指定し、round <'border-radius'> の引数をなくしています。これにより、包含ブロックの幅を持ち、パス 1 やパス 2 の矩形のように角が丸くなく矩形の矩形が作成されます。このボックス内の角の矢印の動きに注目してください。