CSS Clip-Path Generator

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

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

Οι έξι ομαδοποιημένες προεπιλογές επιλέχθηκαν για να αποδειχθεί ότι η διαδρομή κλιπ μπορεί να κάνει περισσότερα από κυρτά σχήματα: το αστέρι και το βέλος βασίζονται και τα δύο σε αντανακλαστικές γωνίες που δείχνουν προς τα μέσα, το συννεφάκι ομιλίας χαράζει μια τριγωνική ουρά από ένα κατά τα άλλα απλό ορθογώνιο και το στέλεχος εισιτηρίου ανοίγει δύο εγκοπές σε αντίθετες άκρες όπως φαίνεται ένα πραγματικό διάτρητο εισιτήριο. Φορτώστε οποιαδήποτε προεπιλογή και συνεχίστε να σύρετε από εκεί — τίποτα σχετικά με το πρόγραμμα επεξεργασίας δεν σας κλειδώνει στο αρχικό σχήμα.

Ανεβάστε τη δική σας εικόνα για να κάνετε προεπισκόπηση της διαδρομής του αποσπάσματος σε πραγματικό περιεχόμενο αντί για ένα απλό πλαίσιο ή παραλείψτε εντελώς τη μεταφόρτωση και η προεπισκόπηση επανέρχεται σε ένα ριγέ μοτίβο, ώστε το σχήμα κοπής να παραμένει καθαρά ορατό σε κάθε περίπτωση. Όπως κάθε εργαλείο σε αυτόν τον ιστότοπο, το όλο θέμα εκτελείται τοπικά στο πρόγραμμα περιήγησης: καμία εικόνα δεν φεύγει ποτέ από τη συσκευή σας και η γεννήτρια συνεχίζει να λειτουργεί εκτός σύνδεσης μετά τη φόρτωση της σελίδας.