מחולל CSS Clip-Path

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

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

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

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