Γεννήτρια CSS Clip-Path

Αυτό το εργαλείο παράγει μια τιμή CSS clip-path από ένα προκαθορισμένο σχήμα — κύκλο, έλλειψη, τρίγωνο, πεντάγωνο, εξάγωνο, αστέρι, ή στρογγυλεμένο ορθογώνιο — και δείχνει το περικομμένο σχήμα ζωντανά σε ένα πλαίσιο προεπισκόπησης πριν αντιγράψετε το CSS. Δεν χρειάζεται χειρόγραφος υπολογισμός συντεταγμένων polygon() για συνηθισμένα σχήματα.

Τι είναι αυτό το εργαλείο;

Το clip-path είναι η ιδιότητα CSS που κρύβει τα πάντα έξω από μια καθορισμένη περιοχή ενός στοιχείου, αφήνοντας ορατό μόνο το σχήμα στο εσωτερικό — το υπόλοιπο κουτί του στοιχείου εξακολουθεί να υπάρχει στη διάταξη, απλώς δεν ζωγραφίζεται. Δέχεται βασικές συναρτήσεις σχήματος όπως circle(), ellipse(), inset(), και polygon(), η τελευταία από τις οποίες παίρνει μια αυθαίρετη λίστα ζευγών συντεταγμένων x/y για να ορίσει οποιοδήποτε σχήμα με ευθείες πλευρές.

Οι συντεταγμένες του polygon() είναι το δυσκολότερο μέρος να γραφτεί με το χέρι — ένα πεντάγωνο, εξάγωνο ή αστέρι χρειάζεται το καθένα αρκετά ακριβώς τοποθετημένα σημεία, και ένα λάθος παραμορφώνει ολόκληρο το σχήμα. Αυτό το εργαλείο υπολογίζει αυτές τις συντεταγμένες για εσάς από ένα προκαθορισμένο σχήμα, ενημερώνει τη ζωντανή προεπισκόπηση αμέσως, και σας δίνει το ακριβές CSS clip-path προς αντιγραφή.

Πηγή: CSS Shapes Module Level 1 / CSS Masking Module Level 1, W3C — οι προδιαγραφές που ορίζουν το clip-path και τις βασικές συναρτήσεις σχήματός του.

Γιατί να το χρησιμοποιήσετε;

Ζωντανή προεπισκόπηση περικόπτει ένα πραγματικό πλαίσιο προεπισκόπησης στο επιλεγμένο σχήμα, ώστε να βλέπετε το πραγματικό αποτέλεσμα αντί να το φαντάζεστε από συντεταγμένες.
Επτά προκαθορισμένα σχήματα — κύκλος, έλλειψη, τρίγωνο, πεντάγωνο, εξάγωνο, αστέρι, και στρογγυλεμένο ορθογώνιο — καλύπτουν τη συντριπτική πλειοψηφία των περιπτώσεων χρήσης clip-path χωρίς χειρόγραφα σημεία polygon.
Τα προκαθορισμένα σχήματα κύκλου, έλλειψης και στρογγυλεμένου ορθογωνίου περιλαμβάνουν ολισθητή μεγέθους/στρογγυλότητας ώστε να προσαρμόζετε το σχήμα χωρίς επεξεργασία συντεταγμένων.
Παράγει τυπικό clip-path CSS έτοιμο προς επικόλληση σε οποιοδήποτε στοιχείο.
Τρέχει εξ ολοκλήρου στον περιηγητή σας — τίποτα από όσα ρυθμίζετε δεν ανεβαίνει πουθενά. Δωρεάν, χωρίς εγγραφή, λειτουργεί σε κινητό.

Πώς χρησιμοποιείται

Επιλέξτε ένα σχήμα από το αναπτυσσόμενο μενού — κύκλος, έλλειψη, τρίγωνο, πεντάγωνο, εξάγωνο, αστέρι, ή στρογγυλεμένο ορθογώνιο.
Για σχήματα κύκλου, έλλειψης και στρογγυλεμένου ορθογωνίου, προσαρμόστε τον ολισθητή μεγέθους/στρογγυλότητας για να λεπτομερειοποιήσετε την περικοπή.
Παρακολουθήστε το πλαίσιο προεπισκόπησης να ενημερώνεται ζωντανά καθώς αλλάζετε το σχήμα ή τον ολισθητή.
Αντιγράψτε το παραγόμενο clip-path CSS και επικολλήστε το στο στοιχείο που θέλετε να περικόψετε.
Για εικόνα αντί για συμπαγές χρώμα, εφαρμόστε την ίδια ιδιότητα clip-path σε ένα <img> ή σε στοιχείο με background-image.

Παράδειγμα

Είσοδος

Σχήμα: Εξάγωνο

Έξοδος

clip-path: polygon(50.0% 0.0%, 93.3% 25.0%, 93.3% 75.0%, 50.0% 100.0%, 6.7% 75.0%, 6.7% 25.0%);

Μια περικοπή κανονικού εξαγώνου, συνήθως χρησιμοποιούμενη για φωτογραφίες προφίλ τύπου κονκάρδας ή εικονίδια χαρακτηριστικών.

Βασικά σχήματα έναντι polygon()

Ο κύκλος, η έλλειψη και το inset (στρογγυλεμένο ορθογώνιο) είναι ενσωματωμένες βασικές συναρτήσεις σχήματος CSS με τη δική τους απλή σύνταξη — μία ή δύο ακτίνες, συν προαιρετική θέση κέντρου ή στρογγύλεμα γωνίας. Το τρίγωνο, το πεντάγωνο, το εξάγωνο και το αστέρι δεν είναι ενσωματωμένα σχήματα· εκφράζονται όλα με polygon(), μια επίπεδη λίστα ζευγών συντεταγμένων x/y που ιχνηλατούν το περίγραμμα του σχήματος. Αυτό το εργαλείο υπολογίζει αυτόματα αυτές τις συντεταγμένες για κανονικά (ομοιόμορφα κατανεμημένα) πολύγωνα και ένα αστέρι πέντε ακτίνων, που είναι το κουραστικό μέρος να το κάνετε σωστά με το χέρι.

Συνηθισμένα μοτίβα clip-path

Κυκλικό avatar ή κονκάρδα: circle() σε μεσαία ακτίνα, συχνά σε συνδυασμό με τετράγωνη πηγαία εικόνα ώστε ο κύκλος να μην τεντώνεται σε έλλειψη.
Διαχωριστικό ενότητας υπό γωνία: ένα προσαρμοσμένο polygon (δεν περιλαμβάνεται ως προκαθορισμένο εδώ) που λοξεύει την πάνω ή κάτω άκρη μιας ενότητας πλήρους πλάτους για ένα μη ορθογώνιο διάλειμμα σελίδας.
Σχήμα εικονιδίου αστεριού βαθμολογίας ή κονκάρδας: το προκαθορισμένο αστέρι, χρήσιμο ως διακοσμητικό σχήμα αντί για χειροποίητο SVG για απλές περιπτώσεις.
Πλέγμα φωτογραφιών εξαγώνου: εικόνες περικομμένες σε εξάγωνο διατεταγμένες σε διάταξη κηρήθρας, ένα συνηθισμένο μοτίβο σελίδας portfolio/ομάδας.
Στρογγυλεμένο ορθογώνιο ως ελαφριά εναλλακτική του border-radius όταν χρειάζεστε η περικοπή να αποκόπτει και υπερχειλισμένο περιεχόμενο παιδιού, καθώς το border-radius από μόνο του δεν περικόπτει παιδιά χωρίς επιπλέον overflow:hidden.

Συνδυασμός με άλλα εργαλεία CSS

Το clip-path συχνά συνδυάζεται με διαβάθμιση CSS ως το περικομμένο φόντο, ή με box-shadow εφαρμοσμένο σε στοιχείο-περιτύλιγμα (καθώς το clip-path περικόπτει επίσης τη δική του σκιά ενός στοιχείου, μια σκιά σε γονέα είναι η συνήθης λύση για ένα περικομμένο σχήμα που πρέπει ακόμα να φαίνεται να αιωρείται).

→ Γεννήτρια CSS Διαβάθμισης · Δημιουργός Border Radius · Δημιουργός Box Shadow

Συχνές ερωτήσεις

Επηρεάζει το clip-path το μέγεθος διάταξης του στοιχείου;

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

Γιατί δεν εμφανίζεται το box-shadow στο περικομμένο σχήμα μου;

Το clip-path περικόπτει ολόκληρη την απόδοση του στοιχείου, συμπεριλαμβανομένης οποιασδήποτε σκιάς ρίχνει, οπότε το δικό του box-shadow ενός στοιχείου περικομμένου με κύκλο ή πολύγωνο κόβεται στο όριο της περικοπής. Για να λάβετε μια σκιά που ακολουθεί το ορατό σχήμα, εφαρμόστε το box-shadow σε ένα μη περικομμένο στοιχείο-περιτύλιγμα γύρω από το περικομμένο.

Μπορώ να κάνω κινούμενη εικόνα ή μετάβαση σε σχήμα clip-path;

Ναι, αλλά μόνο μεταξύ δύο τιμών clip-path του ίδιου τύπου και με τον ίδιο αριθμό σημείων — για παράδειγμα, μία polygon() με 6 σημεία που μεταβαίνει σε άλλη polygon() με 6 σημεία. Η μετάβαση μεταξύ θεμελιωδώς διαφορετικών σχημάτων (ένα circle() σε polygon()) γενικά δεν θα κάνει ομαλή κινούμενη εικόνα σε όλους τους περιηγητές.

Μπορεί το clip-path να χρησιμοποιηθεί σε εικόνες φόντου, όχι μόνο σε περιεχόμενο στοιχείου;

Το clip-path περικόπτει ολόκληρο το στοιχείο — συμπεριλαμβανομένου του background-image, background-color, περιγραμμάτων και περιεχομένου μαζί — αντί για το φόντο ειδικά. Αν θέλετε να περικόψετε μόνο μια εικόνα φόντου διατηρώντας το υπόλοιπο περιεχόμενο μη περικομμένο, εφαρμόστε το clip-path σε ξεχωριστό στοιχείο που κρατά μόνο το φόντο.

Υποστηρίζεται το clip-path σε όλους τους σύγχρονους περιηγητές;

Ναι — το clip-path με βασικές συναρτήσεις σχήματος (circle, ellipse, inset, polygon) είναι Baseline ευρέως διαθέσιμο σε όλους τους μεγάλους περιηγητές από τον Ιανουάριο του 2020, σύμφωνα με τα δεδομένα συμβατότητας του MDN. Είναι γενικά ασφαλές να χρησιμοποιηθεί σε παραγωγή χωρίς εναλλακτική λύση για τρέχουσες εκδόσεις περιηγητών.