CSS Clip-Path Σχηματιστής σχήματος
Δημιουργήστε πολυγώνιο, αστέρι, σήμα, εξάγωνο και σχήματα με σύγχρονη γεωμετρία CSS clip-path.
Εκτελείται στο πρόγραμμα περιήγησής σας. Τα αρχεία σας δεν φεύγουν ποτέ από τη συσκευή. Δείτε πώς να το ελέγξετε
…
Πώς γίνεται
- 1Βήμα 1: ανοίξτε το CSS Clip-Path Σχηματιστής σχήματος και εισαγάγετε τα στοιχεία σας
Πληκτρολογήστε αριθμούς ή κείμενο, προσθέστε το αρχείο σας ή επιλέξτε τις επιλογές που χρειάζεστε. Δεν ανεβαίνει τίποτα: όλα μένουν στο πρόγραμμα περιήγησής σας.
- 2Βήμα 2: τι κάνει το CSS Clip-Path Σχηματιστής σχήματος
Δημιουργήστε πολυγώνιο, αστέρι, σήμα, εξάγωνο και σχήματα με σύγχρονη γεωμετρία CSS clip-path.
- 3Βήμα 3: διαβάστε το αποτέλεσμα και συγκρίνετε
Το αποτέλεσμα εμφανίζεται αμέσως. Αλλάξτε μία τιμή για να δείτε πώς μεταβάλλεται η απάντηση και κρατήστε τον αριθμό που ταιριάζει στην περίπτωσή σας.
- 4Βήμα 4: αντιγράψτε ή αποθηκεύστε
Αντιγράψτε το αποτέλεσμα ή κατεβάστε το. Για σημαντική απόφαση, επιβεβαιώστε το με την επίσημη πηγή ή έναν σύμβουλο.
Σχετικά με αυτό το εργαλείο
Το Clip-path επιτρέπει στους προγραμματιστές να κόβουν στοιχεία HTML και εικόνες σε ακριβή γεωμετρικά πολυγώνια και σχήματα χωρίς την ανάγκη για Photoshop ή SVG μάσκες.
Συμβουλές για το καλύτερο αποτέλεσμα
Πριν ξεκινήσετε, αφιερώστε λίγο χρόνο να διαβάσετε τις επιλογές και δοκιμάστε πρώτα το εργαλείο με ένα μικρό παράδειγμα. Όλα εκτελούνται στο πρόγραμμα περιήγησης στη δική σας συσκευή· τίποτα από όσα πληκτρολογείτε ή προσθέτετε δεν ανεβαίνει και το κλείσιμο της καρτέλας τα σβήνει όλα. Αν κάτι δεν φαίνεται σωστό, φορτώστε ξανά τη σελίδα και δοκιμάστε πάλι ή χρησιμοποιήστε τον σύνδεσμο αναφοράς σε αυτή τη σελίδα για να μας πείτε τι πήγε στραβά. Αν ένα αποτέλεσμα εξακολουθεί να φαίνεται λάθος, αλλάζετε μία τιμή τη φορά για να δείτε ποιο πεδίο επηρεάζει περισσότερο. Προσθέστε τη σελίδα στους σελιδοδείκτες αν θα τη χρησιμοποιήσετε ξανά.
Με μια ματιά
- Κατηγορία: Εικόνες
- Εκτελείται στο πρόγραμμα περιήγησης, χωρίς εγγραφή, χωρίς μεταφόρτωση.
- Τα στοιχεία που εισάγετε μένουν στη συσκευή σας.
- Διαθέσιμο σε πολλές γλώσσες.
- Τελευταία αναθεώρηση περιεχομένου:
Συχνές ερωτήσεις
Τι είναι το CSS clip-path;
The `clip-path` CSS property creates a clipping region that determines which parts of an element or image are visible.
Ποια σχήματα περιλαμβάνονται ως προκαθορισμένα;
Τα προεπιλεγμένα περιλαμβάνουν τρίγωνο, εξάγωνο, αστέρι 5 σημείων, σήμα έκπτωσης προϊόντων, πλοήγηση και κυκλικές μάσκες.
Μπορώ να τραβήξω φωτογραφίες και βίντεο με αυτό;
Yes. Apply the generated clip-path CSS rule to any `<img>`, `<video>`, `<div>`, or card component in your stylesheet.
Επηρεάζει το μονοπάτι κλιπ τα στοιχεία των χιτ-box που μπορούν να κάνουν κλικ;
Στα σύγχρονα προγράμματα περιήγησης, μόνο η ορατή, μη κομμένη περιοχή του στοιχείου ανταποκρίνεται στα γεγονότα κλικ και κούτου.