Jalur klip - Trik CSS | CSS Almanak 2024

The clip-pathproperti di CSS memungkinkan Anda untuk menentukan wilayah tertentu dari suatu unsur untuk display, dengan sisanya yang tersembunyi (atau “dipotong”) pergi.

.clip-me ( /* Example: clip away the element from the top, right, bottom, and left edges */ clip-path: inset(10px 20px 30px 40px); /* or "none" */ /* Example: clip element into a Heptagon */ clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%); /* Deprecated version */ position: absolute; /* absolute or fixed positioning required */ clip: rect(110px, 160px, 170px, 60px); /* or "auto" */ /* values descript a top/left point and bottom/right point */ )

Dulu ada sebuah clipproperti, tapi catatan itu sudah usang.

Kasus penggunaan yang paling umum adalah gambar, tetapi tidak terbatas pada itu. Anda bisa dengan mudah menerapkannya clip-pathke tag paragraf dan hanya sebagian teks.

 
 I'll be clipped.

Keempat nilai di inset()(dalam CSS di atas) mewakili titik atas / kiri dan titik bawah / kanan , yang membentuk persegi panjang yang terlihat. Segala sesuatu di luar persegi panjang itu tersembunyi.

Gambar oleh Louis Lazaris ini menjelaskan empat poin dari **sintaks** **lama dengan`clip: rect();`** sangat baik.

Nilai lain yang mungkin:

.clip-me ( /* referencing path from an inline SVG */ clip-path: url(#c1); /* referencing path from external SVG */ clip-path: url(path.svg#c1); /* polygon */ clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); /* circle */ clip-path: circle(30px at 35px 35px); /* ellipse */ clip-path: ellipse(65px 30px at 125px 40px); /* inset-rectangle() may replace inset() ? */ /* rectangle() coming in SVG 2 */ /* rounded corners… not sure if a thing anymore */ clip-path: inset(10% 10% 10% 10% round 20%, 20%); )

Contoh jalur klip SVG:

Sangat aneh yang clip-pathtidak mendukung path()fungsi di luar gerbang, karena path()sudah menjadi hal untuk properti seperti motion-path. Firefox memiliki dukungan untuk itu sekarang, dan kami menunggu peramban lainnya. Lihat Penerapan Awal clip-path: path ();

Buatlah milikmu sendiri

Sampai kami dapat menggunakan dengan andal path(), klip yang paling berguna untuk bentuk kustom yang mewah adalah polygon(). Ini editor yang sangat rapi untuk mereka dari Mads Stoumann (yang juga berfungsi untuk lingkaran dan elips):

Informasi Lebih Lanjut

Clipping dan Masking di CSS
clip-path di WPD
clip-path di MDN
Clippy: Pembuat jalur klip Bennett Feely
Clipping dan masking di MDN
Properti Klip CSS (tidak digunakan lagi) (Web yang Mengesankan)
Spec tentang CSS Masking
CSS Masking oleh Dirk Schulze
Kliping dalam CSS dan SVG - Properti dan Elemen jalur klip oleh Sara Soueidan
Pena menandai jalur klip pada CodePen
Demo dan dukungan browser Demo Pen oleh Yoksel
SVG Masks oleh Jakob Jenkov
Riset Alan Greenblatt tentang tingkat dukungan browser untuk fitur kliping dan masking

Dukungan Browser

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.