polygon()

試してみましょう

clip-path: polygon(
  0% 20%,
  60% 20%,
  60% 0%,
  100% 50%,
  60% 100%,
  60% 80%,
  0% 80%
);

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#default-example {
  background: #ffee99;
}

#example-element {
  background: linear-gradient(to bottom right, #ff5522, #0055ff);
  width: 100%;
  height: 100%;
}

構文

/* 座標リストとして指定 */
/* polygon(<length-percentage> <length-percentage>, ... )*/
polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%)
polygon(0px 0px, 200px 100px, 0px 200px)
polygon(0% 0px, 100% 100px, 0px 100%)
polygon(0 0, 50% 1rem, 100% 2vw, calc(100% - 20px) 100%, 0 100%)

/* 座標リストと塗りつぶしルールとして指定 */
/* polygon(<fill-rule> <length-percentage> <length-percentage>, ... )*/
polygon(nonzero, 0% 0%, 50% 50%, 0% 100%)
polygon(evenodd, 0% 0%, 50% 50%, 0% 100%)

polygon() の引数はカンマとオプションの空白で区切られます。最初の引数はオプションの <fill-rule> 値です。追加の引数は多角形を定義する点です。この点はそれぞれ x/y 座標 <length-percentage> の値を空間で区切ったもので、例えば左/上隅は "0 0"、右下隅は "100% 100%" となります。

メモ: SVG の <polygon> 要素には、fill-rule と points の独立した属性があり、points は区切り文字として空白とカンマを柔軟に使用できます。 CSS の polygon() では区切り文字に対するルールは厳密に適用されます。

値

<fill-rule> 省略可

オプションで nonzero （省略時の既定値）または evenodd のどちらかであり、塗りつぶしルールを指定します。

<length-percentage>

多角形の各頂点は <length-percentage> の値の組で表します。この値は図形の参照ボックスからの相対座標で頂点の x/y 座標を表します。

返値

<basic-shape> 値を返します。

解説

polygon() 関数で点の座標を指定すると、ほとんどの図形を作成することができます。この点を定義する順番は重要で、異なる図形を作ることができます。 polygon() 関数は少なくとも 3 つの点が必要で、これは三角形を作成しますが、上限はありません。

polygon() 関数はカンマ区切りの座標または点を値として受け入れます。各点は空間で区切られた x と y のペアの値で表します。このペアは多角形内の点の座標を示します。

polygon(x1 y1, x2 y2, x3 y3, x4 y4, xn yn)

上記のように指定された場合、コンテナーの座標をマッピングすると、次のように視覚化できます。

その座標を CSS の clip-path プロパティに、 polygon() 関数を使用して適用します。

clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);

これは、左上 (0% 0%), 右上 (100% 0%), 右下 (100% 100%), 左下 (0% 100%) の 4 つの角の座標を指定することで、親コンテンツの大きさの長方形の図形を作成します。

形式文法

<polygon()> = 
  polygon( <'fill-rule'>? [ round <length> ]? , [ <length-percentage> <length-percentage> ]# )  

<fill-rule> = 
  nonzero  |
  evenodd  

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

例

三角形の作成

この例では、 3 点の座標を定義して三角形を形成します。

HTML

<div class="triangle"></div>

CSS

.triangle {
  width: 400px;
  height: 400px;
  background-color: magenta;
  clip-path: polygon(100% 0%, 50% 50%, 100% 100%);
}

結果

三角形の座標は、コンテナーの右上隅 (100% 0%)、中心点 (50% 50%)、右下隅 (100% 100%) です。

shape-outside のための多角形を設定

この例では、 shape-outside プロパティを使用して、テキストが沿う位置の図形を作成しています。

<div class="box">
  <div class="shape"></div>
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery. Before that night—a memorable night,
    as it was to prove—hundreds of millions of people had watched the rising
    smoke-wreaths of their fires without drawing any special inspiration from
    the fact.
  </p>
</div>

.box {
  width: 250px;
}

.shape {
  float: left;
  shape-outside: polygon(
    0 5%,
    15% 12%,
    30% 15%,
    40% 26%,
    45% 35%,
    45% 45%,
    40% 55%,
    10% 90%,
    10% 98%,
    8% 100%,
    0 100%
  );
  width: 300px;
  height: 320px;
}

p {
  font-size: 0.9rem;
}

仕様書

ブラウザーの互換性

関連情報

• このデータ型を使用するプロパティ: clip-path, shape-outside
• 基本シェイプのガイド