<basic-shape>

clip-path: inset(22% 12% 15px 35px);

clip-path: circle(6rem at 12rem 8rem);

clip-path: ellipse(115px 55px at 50% 40%);

clip-path: polygon(
  50% 2.4%,
  34.5% 33.8%,
  0% 38.8%,
  25% 63.1%,
  19.1% 97.6%,
  50% 81.3%,
  80.9% 97.6%,
  75% 63.1%,
  100% 38.8%,
  65.5% 33.8%
);

clip-path: path("M 50,245 A 160,160 0,0,1 360,120 z");

<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%;
}

<basic-shape> 1 <basic_shape> CSS

round <'border-radius'>

CSS border-radius

<shape-radius>

<length><percentage>closest-sidefarthest-side

closest-side farthest-side

<position>

(<position>) center

<fill-rule>

(fill-rule) nonzero evenodd

: <fill-rule> offset-path

: <basic-shape-rect>

<basic-shape-rect> <basic-shape> inset()rect()xywh()

polygon()path()shape()

inset() 4

inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )

4 margin 1 2 3 4

100% 100% inset(90% 10% 60% 10%) 90% 60% inset(60% 10% 40% 10%) shape-margin

rect()

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

rect() 4 4 <length><percentage> auto auto 0% 100%

xywh() (x) (y) (w) (h)

xywh( <length-percentage>{2} <length-percentage [0,]>{2} [ round <'border-radius'> ]? )

circle()

circle( <shape-radius>? [ at <position> ]? )

<shape-radius> <length> <percentage> sqrt(width^2+height^2)/sqrt(2) closest-side

ellipse() 2

ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )

<shape-radius> rx ry X Y <length> <percentage> rx ry 1 ellipse() 50% 50%

polygon() SVG fill-rule

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

2 <length-percentage> xi yi i2 x y

path() SVG (fill-rule)

path( <'fill-rule'>? , <string> )

<string> [SVG ] (/ja/docs/Web/SVG/Reference/Attribute/d) path() shape-outside

shape()

shape( <'fill-rule'>? from <coordinate-pair> , <shape-command># )

from <coordinate-pair> <shape-command> 1 SVG shape() shape-outside

<basic-shape> xy

margin-box shape-outside: circle(50%)

[Firefox ]

<basic-shape>

• <position> circle() ellipse() 2 <length-percentage>
• <border-radius> inset() 8 <length> <percentage>
• inset()rect()xywh() inset()

2 <basic-shape> <basic-shape> 2 <basic-shape>

2 <basic-shape> <number><length><percentage><angle>calc() 2 nonzero

• ellipse() circle() : <length> <percentage>closest-side farthest-side

• inset() :

• polygon() : <fill-rule>

• path() : <number>

• shape() : <by-to> clip-path shape() 2 <fill-rule>

  • <curve-command> <smooth-command>

  • <arc-command> <arc-sweep> (cw) <arc-size> large

• path() shape() : shape()

@keyframes 2

HTML

<div></div>

CSS

div {
  width: 300px;
  height: 300px;
  background: repeating-linear-gradient(red, orange 50px);
  clip-path: polygon(
    50% 0%,
    60% 40%,
    100% 50%,
    60% 60%,
    50% 100%,
    40% 60%,
    0% 50%,
    40% 40%
  );
  animation: 4s poly infinite alternate ease-in-out;
  margin: 10px auto;
}

@keyframes poly {
  from {
    clip-path: polygon(
      50% 0%,
      60% 40%,
      100% 50%,
      60% 60%,
      50% 100%,
      40% 60%,
      0% 50%,
      40% 40%
    );
  }

  to {
    clip-path: polygon(
      50% 30%,
      100% 0%,
      70% 50%,
      100% 100%,
      50% 70%,
      0% 100%,
      30% 50%,
      0% 0%
    );
  }
}

• : clip-path, offset-path, shape-outside
• SVG : <circle>, <ellipse>, <line>, <polygon>, <polyline>, <rect>
• CSS
• CSS
• CSS
• CSS
• CSS Firefox