clip-path dengan polygon() dan circle()

clip-path memotong kawasan kelihatan sesuatu elemen mengikut bentuk yang ditentukan. Segala-galanya di luar bentuk itu tidak kelihatan (tetapi masih mengambil ruang dalam susun atur).

Potong elemen menjadi bentuk bulat. Argumen tersebut ialah jejari:

Potong menjadi bentuk elips dengan menentukan jejari x, jejari y dan kedudukan tengah pilihan:

clip-path yang paling berkuasa. Takrifkan poligon dengan menyenaraikan pasangan koordinat x,y:

Potong menjadi segi empat tepat dengan bucu bulat pilihan. Argumennya ialah jarak sisipan:

Cipta peralihan seksyen bersudut antara seksyen halaman:

clip-path dengan bilangan titik yang sama boleh dianimasikan secara peralihan untuk animasi pendedahan dan perubahan bentuk:

Untuk bentuk ringkas dengan bucu bulat, border-radius lebih baik — ia berfungsi dengan latar belakang dan jidar. Gunakan clip-path apabila anda memerlukan bentuk bukan segi empat tepat yang tidak dapat dicapai oleh border-radius.

path() menerima rentetan laluan SVG untuk bentuk sewenang-wenangnya:

clip-path mencipta konteks tindanan baharu dan mungkin mencetuskan proses melukis pada setiap bingkai apabila dianimasikan. Menganimasikan clip-path lebih membebankan berbanding transform atau opacity — gabungkan dengan teliti.

Sistem koordinat untuk clip-path ialah kotak jidar elemen (atau kotak margin untuk SVG). Peratusan adalah relatif kepada dimensi elemen.

clip-path memotong elemen kepada bentuk geometri. circle() dan ellipse() mencipta potongan bulat. polygon() mentakrifkan sebarang bentuk berbilang bucu. inset() memotong kepada segi empat tepat dengan pembulatan pilihan. Animasikan peralihan antara bentuk poligon dengan bilangan titik yang sama untuk pendedahan dramatik. Gunakan path() untuk bentuk sewenang-wenangnya berasaskan SVG.