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

Πώς να χρησιμοποιήσετε τη γεννήτρια clip-path

1. Επιλέξτε ένα Σχήμα: Πολύγωνο, Κύκλος, Έλλειψη ή Inset. Το αχνό επίπεδο δείχνει ολόκληρο το στοιχείο, το φωτεινό δείχνει τι παραμένει ορατό μετά την αποκοπή.
2. Σύρετε τις κουκκίδες στον επεξεργαστή. Στο πολύγωνο, κάθε κουκκίδα είναι μια κορυφή· κάντε κλικ οπουδήποτε στην περιοχή για να προσθέσετε σημείο στην πλησιέστερη πλευρά. Στον κύκλο και την έλλειψη, σύρετε το κέντρο και τις κουκκίδες της ακτίνας. Στο inset, σύρετε τις τέσσερις κουκκίδες των άκρων.
3. Ρυθμίστε με ακρίβεια στα πεδία από κάτω: τη λίστα Σημεία (X και Y σε ποσοστό, με Αφαίρεση και Προσθήκη σημείου) για τα πολύγωνα ή τα πεδία Ακτίνα, Κέντρο X, Κέντρο Y, Πάνω, Δεξιά, Κάτω, Αριστερά και Στρογγυλεμένες γωνίες (px) για τα άλλα σχήματα.
4. Ξεκινήστε πιο γρήγορα με τις Προεπιλογές: τρίγωνο, τραπέζιο, παραλληλόγραμμο, ρόμβος, πεντάγωνο, εξάγωνο, οκτάγωνο, λοξοτομή, αστέρι, σταυρός, βέλη, σεβρόν, συννεφάκι ομιλίας, κύκλος, έλλειψη και inset.
5. Επιλέξτε Προσκόλληση ανά 5% για καθαρές τιμές και Προσθήκη -webkit-clip-path (παλιό Safari) αν υποστηρίζετε ακόμη το Safari 13.0 ή παλαιότερο.
6. Προαιρετικά, αφήστε μια φωτογραφία στο Εικόνα φόντου (προαιρετικά) για να δείτε το σχήμα πάνω στη δική σας εικόνα. Το αρχείο δεν μεταφορτώνεται ποτέ.
7. Αντιγράψτε τον Κώδικας CSS με το κουμπί Αντιγραφή.

Πληκτρολόγιο: επιλέξτε μια κουκκίδα, μετακινήστε την με τα βελάκια (1% ή 10% με Shift) και πατήστε Delete για να αφαιρέσετε ένα σημείο του πολυγώνου. Ένα πολύγωνο διατηρεί πάντα τουλάχιστον τρία σημεία.

Οι συναρτήσεις σχήματος του clip-path

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

• polygon(x1 y1, x2 y2, …) ενώνει τα σημεία με τη σειρά και κλείνει το σχήμα. Το polygon(50% 0%, 100% 100%, 0% 100%) είναι τρίγωνο που δείχνει προς τα πάνω. Οι συντεταγμένες ξεκινούν από την πάνω αριστερή γωνία του στοιχείου.
• circle(r at cx cy): το circle(50% at 50% 50%) είναι ο μεγαλύτερος κύκλος με κέντρο στο κέντρο του στοιχείου. Μια ακτίνα σε ποσοστό είναι σχετική με τη διαγώνιο του στοιχείου διαιρεμένη με √2, άρα ισούται με ποσοστό του πλάτους μόνο στα τετράγωνα στοιχεία.
• ellipse(rx ry at cx cy): η οριζόντια ακτίνα είναι ποσοστό του πλάτους, η κάθετη ποσοστό του ύψους.
• inset(top right bottom left round radius) κόβει ένα ορθογώνιο μέσα από τις άκρες, με την ίδια συντομογραφία μίας έως τεσσάρων τιμών όπως στα περιθώρια και με προαιρετικές στρογγυλεμένες γωνίες.

Το εργαλείο γράφει ποσοστά, οπότε το σχήμα κλιμακώνεται μαζί με το στοιχείο όποιο μέγεθος κι αν έχει.

Συμβουλές για καλά σχήματα

• Η σειρά των σημείων του πολυγώνου έχει σημασία: αν ακολουθήσετε την περίμετρο δεξιόστροφα (ή αριστερόστροφα), αποφεύγετε τα σταυρωτά σχήματα «παπιγιόν».
• Δύο σχήματα με τον ίδιο αριθμό σημείων μπορούν να κινηθούν: το transition: clip-path 0.4s μετατρέπει ομαλά ένα εξάγωνο σε άλλο εξάγωνο. Το πρόγραμμα περιήγησης δεν μπορεί να παρεμβάλει ανάμεσα σε πολύγωνα με διαφορετικό αριθμό σημείων.
• Το clip-path αποκόπτει επίσης το box-shadow και τα περιγράμματα. Για να δώσετε σκιά σε ένα σχήμα με αποκοπή, βάλτε filter: drop-shadow() σε ένα γονικό στοιχείο.
• Οι περιοχές που έχουν αποκοπεί δεν δέχονται κλικ ή αιώρηση του ποντικιού, κάτι χρήσιμο για κουμπιά ακανόνιστου σχήματος.