clip-path

export default function Page() {
    return (
        <div className="space-y-20">

            <div className="w-3/4 lg:w-1/2 aspect-video mx-auto border-t-2 border-l-2 border-dashed relative">
                <span className="absolute top-5 left-5">(x, y)</span>
                <span className="absolute top-5 right-0">x axis</span>
                <span className="absolute bottom-0 left-5">y axis</span>
            </div>

            <div className="space-y-10">
                <p className="text-center text-4xl">clip-path: inset()</p>
                <div className="flex gap-5 justify-center items-center flex-col md:flex-row">

                    <div className="size-36 bg-rose-500"/>

                    <div className="size-36 border border-dashed">
                        <div className="size-full bg-rose-500"
                             style={ { clipPath: "inset(10px)" } }/>
                    </div>
                    <div className="size-36 border border-dashed">
                        <div className="size-full bg-rose-500"
                             style={ { clipPath: "inset(20%)" } }/>
                    </div>
                    <div className="size-36 border border-dashed">
                        <div className="size-full bg-rose-500"
                             style={ { clipPath: "inset(10px 20px)" } }/>
                    </div>
                    <div className="size-36 border border-dashed">
                        <div className="size-full bg-rose-500"
                             style={ { clipPath: "inset(10px 20px round 10% 20%)" } }/>
                    </div>
                </div>
            </div>

            <div className="space-y-10">
                <p className="text-center text-4xl">clip-path: circle()</p>
                <div className="flex gap-5 justify-center items-center flex-col md:flex-row">
                    <div className="size-36 bg-teal-400"/>

                    <div className="size-36 border border-dashed">
                        <div className="size-full bg-teal-400"
                             style={ { clipPath: "circle(50px)" } }/>
                    </div>
                    <div className="size-36 border border-dashed">
                        <div className="size-full bg-teal-400"
                             style={ { clipPath: "circle(50%)" } }/>
                    </div>

                    <div className="size-36 border border-dashed">
                        <div className="size-full bg-teal-400"
                             style={ { clipPath: "circle(60%)" } }/>
                    </div>

                    <div className="size-36 border border-dashed">
                        <div className="size-full bg-teal-400"
                             style={ { clipPath: "circle(50% at top left)" } }/>
                    </div>
                </div>
            </div>

            <div className="space-y-10">
                <p className="text-center text-4xl">clip-path: ellipse()</p>
                <div className="flex gap-5 justify-center items-center flex-col md:flex-row">
                    <div className="size-36 bg-purple-700"/>

                    <div className="size-36 border border-dashed">
                        <div className="size-full bg-purple-700"
                             style={ { clipPath: "ellipse(20px 50px)" } }/>
                    </div>
                    <div className="size-36 border border-dashed">
                        <div className="size-full bg-purple-700"
                             style={ { clipPath: "ellipse(50% 50%)" } }/>
                    </div>

                    <div className="size-36 border border-dashed">
                        <div className="size-full bg-purple-700"
                             style={ { clipPath: "ellipse(50% 25% at center center)" } }/>
                    </div>

                    <div className="size-36 border border-dashed">
                        <div className="size-full bg-purple-700"
                             style={ { clipPath: "ellipse(25% 50% at top left)" } }/>
                    </div>
                </div>
            </div>

            <div className="space-y-10">
                <p className="text-center text-4xl">clip-path: polygon()</p>
                <div className="flex gap-5 justify-center items-center flex-col md:flex-row">
                    <div className="size-36 bg-green-500"/>

                    <div className="size-36 border border-dashed">
                        <div className="size-full bg-green-500"
                             style={ { clipPath: "polygon(50% 0%, 100% 50%, 50% 100%)" } }/>
                    </div>
                    <div className="size-36 border border-dashed">
                        <div className="size-full bg-green-500"
                             style={ { clipPath: "polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%)" } }/>
                    </div>

                    <div className="size-36 border border-dashed">
                        <div className="size-full bg-green-500"
                             style={ { clipPath: "polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%" } }/>
                    </div>

                    <div className="size-36 border border-dashed">
                        <div className="size-full bg-green-500"
                             style={ { clipPath: "polygon(0% 0%, 50% 0%, 100% 50%, 50% 100%, 0% 100%, 50% 50%)" } }/>
                    </div>
                </div>
            </div>

            <div className="space-y-10">
                <p className="text-center text-4xl">clip-path: path()</p>
                <div className="flex gap-5 justify-center items-center flex-col md:flex-row">
                    <div className="w-100 h-50 bg-blue-600"/>
                    <div className="w-100 h-50 border border-dashed">
                        { /* M 绘制开始 */ }
                        { /* Z 绘制结束形成闭合图形 */ }
                        { /* L 两点之间使用直线连接 */ }
                        { /* A 两点之间使用椭圆曲线 rx ry x-axis-rotation large-arc-flag sweep-flag */ }
                        { /* A 椭圆圆心 两点水平轴垂轴焦点 */ }
                        <div className="size-full bg-blue-600"
                             style={ { clipPath: "path('M 20,20 L 280,20 A 100,50 0,0,0 380,70 L 380, 180, 20,180 L 20,20 Z')" } }/>
                    </div>
                </div>
            </div>
        </div>
    )
}