CSS Clip-Path Generator

CSS clip-path מקבל פונקציית polygon() העשויה מכל מספר של זוגות קואורדינטות x/y, מה שאומר שהוא יכול לגלף תיבה לצורות הרבה מעבר למלבנים והמעגלים הפשוטים שרוב האנשים מגיעים אליהם. הקאץ' הוא שהקלדת הקואורדינטות האלה ביד היא מייגעת וכמעט בלתי אפשרית להתאים לכל דבר מעבר למשולש בסיסי - המחולל הזה הופך את רשימת הקואורדינטות הזו לסט של נקודות שניתנות לגרירה בתצוגה מקדימה חיה, כך שהצורה שאתה רואה היא תמיד הצורה שה-CSS מייצר.

כל נקודה בתצוגה המקדימה מאוחסנת כאחוז מהרוחב והגובה של התיבה, וזה בדיוק איך clip-path: polygon() עצמו עובד מתחת למכסה המנוע: צורה הבנויה כך שומרת על הפרופורציות שלה נכונות לא משנה באיזה גודל האלמנט מגיע בעמוד אמיתי, ממסיכת אייקונים קטנה ועד באנר גיבור ברוחב מלא. גרור כל נקודה כדי לעצב מחדש את קווי המתאר, לחץ קרוב לקצה כדי להוסיף נקודה חדשה בדיוק במקום שבו לחצת, או לחץ פעמיים על נקודה קיימת כדי למחוק אותה - העורך תמיד שומר לפחות שלוש נקודות, מכיוון שמצולע לא יכול להתקיים עם פחות.

שש הקביעות הקבועות החבילות נבחרות כדי להוכיח שנתיב קליפ יכול לעשות יותר מצורות קמורות: הכוכב והחץ מסתמכים שניהם על זוויות רפלקס שמצביעות פנימה, בועת הדיבור חוצבת זנב משולש ממלבן רגיל אחרת, ופס הכרטיס חורץ שני חריצים בקצוות מנוגדים כפי שנראה כרטיס מחורר אמיתי. טען כל הגדרה מראש והמשך לגרור משם - שום דבר בעורך לא נועל אותך לצורת ההתחלה.

העלה תמונה משלך כדי להציג תצוגה מקדימה של נתיב הקליפ מול תוכן אמיתי במקום קופסה רגילה, או דלג על ההעלאה לחלוטין והתצוגה המקדימה תחזור לתבנית פסים כך שצורת החיתוך תישאר נראית בבירור בכל מקרה. כמו כל כלי באתר זה, כל העניין פועל באופן מקומי בדפדפן: אף תמונה לא עוזבת את המכשיר שלך, והמחולל ממשיך לעבוד במצב לא מקוון ברגע שהדף נטען.