Διαδρομή κλιπ - CSS-Κόλπα

Πίνακας περιεχομένων

Η clip-pathιδιότητα στο CSS σάς επιτρέπει να καθορίσετε μια συγκεκριμένη περιοχή ενός στοιχείου που θα εμφανίζεται, με τα υπόλοιπα να είναι κρυμμένα (ή "κομμένα") μακριά.

.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 */ )

Υπήρχε μια clipιδιοκτησία, αλλά σημειώστε ότι έχει καταργηθεί.

Η πιο κοινή περίπτωση χρήσης θα ήταν μια εικόνα, αλλά δεν περιορίζεται σε αυτήν. Θα μπορούσατε να εφαρμόσετε εξίσου εύκολα clip-pathσε μια ετικέτα παραγράφου και μόνο ένα τμήμα του κειμένου.

 
 I'll be clipped.

Αυτές οι τέσσερις τιμές στο inset()(στο CSS παραπάνω) αντιπροσωπεύουν το πάνω / αριστερό σημείο και το κάτω / δεξί σημείο, το οποίο σχηματίζει το ορατό ορθογώνιο. Τα πάντα εκτός αυτού του ορθογωνίου είναι κρυμμένα.

Αυτή η εικόνα του Louis Lazaris εξηγεί πολύ καλά τα τέσσερα σημεία της **παλιάς `clip: rect();`σύνταξης** .

Άλλες πιθανές τιμές:

.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%); )

Παράδειγμα διαδρομής κλιπ SVG:

Είναι πολύ περίεργο που clip-pathδεν υποστηρίζει τη path()λειτουργία έξω από την πύλη, αφού path()είναι ήδη κάτι για ιδιότητες όπως motion-path. Ο Firefox υποστηρίζει τώρα και περιμένουμε τα υπόλοιπα προγράμματα περιήγησης. Δείτε μια αρχική υλοποίηση της διαδρομής κλιπ: διαδρομή ();

Κάνε το δικό σου

Μέχρι να μπορέσουμε να χρησιμοποιήσουμε αξιόπιστα path(), τα πιο χρήσιμα κλιπ για φανταχτερά προσαρμοσμένα σχήματα είναι polygon(). Εδώ είναι ένας πολύ τακτοποιημένος συντάκτης για εκείνους της Mads Stoumann (που λειτουργεί και για κύκλους και ελλείψεις):

Περισσότερες πληροφορίες

Αποκοπή και απόκρυψη σε CSS
κλιπ-διαδρομή στο WPD
κλιπ-διαδρομή στο MDN
Clippy: Ο δημιουργός clip-path του Bennett Feely
Αποκοπή και απόκρυψη στο MDN
Η (καταργημένη) ιδιότητα κλιπ CSS (Εντυπωσιακοί Ιστότοποι)
Προδιαγραφή στο CSS Masking
CSS Masking από τον Dirk Schulze
Αποκοπή σε CSS και SVG - Η ιδιότητα και το στοιχείο κλιπ διαδρομής από τη Sara Soueidan
Στυλό με ετικέτα κλιπ-διαδρομή στο CodePen
Επίδειξη και υποστήριξη προγράμματος περιήγησης Pen Pen από Yoksel
Μάσκες SVG από τον Jakob Jenkov
Η έρευνα του Alan Greenblatt σχετικά με τα επίπεδα υποστήριξης του προγράμματος περιήγησης για δυνατότητες αποκοπής και απόκρυψης

Υποστήριξη προγράμματος περιήγησης

Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.