Μετάβαση στο περιεχόμενο

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

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

50%
50%
50%
 

Τι είναι το CSS clip-path;

Η ιδιότητα CSS clip-path δημιουργεί μια περιοχή αποκοπής που ορίζει ποιο μέρος ενός στοιχείου πρέπει να εμφανίζεται. Τα μέρη εντός της περιοχής είναι ορατά· τα μέρη εκτός είναι κρυμμένα.

Σχήματα clip-path

Το circle() δημιουργεί κυκλική αποκοπή. Το ellipse() δημιουργεί ελλειπτική αποκοπή. Το inset() δημιουργεί ορθογώνια αποκοπή με προαιρετικές στρογγυλεμένες γωνίες. Το polygon() δημιουργεί προσαρμοσμένο σχήμα ορισμένο από σειρά σημείων συντεταγμένων.

Απόρρητο

Όλη η δημιουργία clip-path εκτελείται 100% στον browser σας. Κανένα δεδομένο δεν αποστέλλεται σε κανέναν server.