Γεννήτρια CSS Clip-Path
Σχεδιάστε αυθαίρετα πολυγωνικά σχήματα — συμπεριλαμβανομένων κοίλων εγκοπών — σύροντας σημεία πάνω σε ένα πεδίο ζωντανής προεπισκόπησης ή στη δική σας μεταφορτωμένη εικόνα και αντιγράψτε την παραγόμενη τιμή clip-path: polygon(...) της CSS.
🔒 Επεξεργάζεται εξ ολοκλήρου στο πρόγραμμα περιήγησής σας — τίποτα που εισάγετε εδώ δεν μεταφορτώνεται ποτέ.
Αποτέλεσμα
Το CSS clip-path δέχεται μια συνάρτηση polygon() που αποτελείται από οποιονδήποτε αριθμό ζευγών συντεταγμένων x/y, πράγμα που σημαίνει ότι μπορεί να χαράξει ένα πλαίσιο σε σχήματα πολύ πέρα από τα απλά ορθογώνια και κύκλους που επιλέγουν οι περισσότεροι. Το πρόβλημα είναι ότι η πληκτρολόγηση αυτών των συντεταγμένων με το χέρι είναι βαρετή και σχεδόν αδύνατο να επιτευχθεί σωστά για οτιδήποτε πέρα από ένα βασικό τρίγωνο — αυτή η γεννήτρια μετατρέπει τη λίστα συντεταγμένων σε ένα σύνολο από σύρσιμα σημεία πάνω σε μια ζωντανή προεπισκόπηση, έτσι ώστε το σχήμα που βλέπετε να είναι πάντα το σχήμα που παράγει η CSS.
Κάθε σημείο στην προεπισκόπηση αποθηκεύεται ως ποσοστό του πλάτους και του ύψους του πλαισίου, το οποίο είναι ακριβώς ο τρόπος που λειτουργεί το ίδιο το clip-path: polygon() σε χαμηλό επίπεδο: ένα σχήμα που φτιάχνεται με αυτόν τον τρόπο διατηρεί τις αναλογίες του σωστές ανεξάρτητα από το μέγεθος που θα αποκτήσει το στοιχείο σε μια πραγματική σελίδα, από μια μικρή μάσκα εικονιδίου έως ένα μπάνερ ήρωα πλήρους πλάτους. Σύρετε οποιοδήποτε σημείο για να αναδιαμορφώσετε το περίγραμμα, κάντε κλικ κοντά σε μια ακμή για να προσθέσετε ένα νέο σημείο ακριβώς στο σημείο που κάνατε κλικ ή κάντε διπλό κλικ σε ένα υπάρχον σημείο για να το διαγράψετε — ο επεξεργαστής διατηρεί πάντα τουλάχιστον τρία σημεία, καθώς ένα πολύγωνο δεν μπορεί να υπάρξει με λιγότερα.
Οι έξι ενσωματωμένες προεπιλογές έχουν επιλεγεί για να αποδείξουν ότι το clip-path μπορεί να κάνει περισσότερα από κυρτά σχήματα: το αστέρι και το βέλος βασίζονται σε ανακλώμενες γωνίες που δείχνουν προς τα μέσα, το συννεφάκι διαλόγου χαράζει μια τριγωνική ουρά από ένα κατά τα άλλα απλό ορθογώνιο και το απόκομμα εισιτηρίου δημιουργεί δύο εγκοπές σε απέναντι άκρες όπως φαίνεται ένα πραγματικό διάτρητο εισιτήριο. Φορτώστε οποιαδήποτε προεπιλογή και συνεχίστε να σέρνετε από εκεί — τίποτα στον επεξεργαστή δεν σας κλειδώνει στο αρχικό σχήμα.
Μεταφορτώστε τη δική σας εικόνα για να δείτε το clip-path πάνω σε πραγματικό περιεχόμενο αντί για ένα απλό πλαίσιο ή παραλείψτε εντελώς τη μεταφόρτωση και η προεπισκόπηση επανέρχεται σε ένα ριγέ μοτίβο, ώστε το κομμένο σχήμα να παραμένει ευδιάκριτο σε κάθε περίπτωση. Όπως κάθε εργαλείο σε αυτόν τον ιστότοπο, το σύνολο εκτελείται τοπικά στο πρόγραμμα περιήγησης: καμία εικόνα δεν φεύγει ποτέ από τη συσκευή σας και η γεννήτρια συνεχίζει να λειτουργεί εκτός σύνδεσης μόλις φορτωθεί η σελίδα.