clip-path 截切

clip-path MDN
clip-path CSS-TRICKS
圓形 circle( 半徑 at 圓心座標 )

/* <basic-shape> values */
clip-path: circle(50px at 0 100px);

circle() MDN

circle( ): Defines a circle using a radius and a position.

SYNTAX

shape-outside: circle(50%);
clip-path: circle(6rem at 12rem 8rem);

Values

This may be a , or a or values closest-side and farthest-side.

closest-side
Uses the length from the center of the shape to the closest side of the reference box. For circles, this is the closest side in any dimension.

farthest-side
Uses the length from the center of the shape to the farthest side of the reference box. For circles, this is the closest side in any dimension.

Moves the center of the circle. May be a , or a , or a values such as left.

clip-path: circle(50px);
clip-path: circle(6rem at right center);
clip-path: circle(10% at 2rem 90%);
clip-path: circle(30px at 35px 35px);
clip-path: circle(closest-side at 5rem 6rem);
clip-path: circle(farthest-side);

clip-path: circle([a]10% at [b]2rem [c]90%);
CODEPEN LINK
[a] 100%: 原本依長寬設定的形狀
[a] 50%: 正圓形
[a] 49% ~ 1%: 圓形漸漸變小; 0%:圓形不見
[b][c]圓心位置
[b][c] 0% 0%: 圓心在viewport的左上角 1/4右下圓
[b][c] 50% 0%: 圓心往右 直徑50% 1/2 下半圓
[b][c] 50% 50%: 圓心往右 往下 各直徑50%，出現完整的圓
[b][c] 50% 100%: 圓心往右 往下 直徑50%、100%，出現上半圓