מחולל CSS Clip-Path

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

מהו הכלי הזה?

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

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

מקור: CSS Shapes Module Level 1 / CSS Masking Module Level 1, W3C — המפרטים המגדירים את clip-path ופונקציות הצורה הבסיסיות שלו.

למה להשתמש בו?

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

איך להשתמש

בחרו צורה מהתפריט הנפתח — עיגול, אליפסה, משולש, מחומש, משושה, כוכב, או מלבן בעל פינות מעוגלות.
עבור עיגול, אליפסה ומלבן מעוגל, כוונו את מחוון הגודל/עיגול כדי לדייק את הגזירה.
צפו בתיבת התצוגה המקדימה מתעדכנת בזמן אמת בעת שינוי הצורה או המחוון.
העתיקו את קוד ה-clip-path שנוצר והדביקו אותו על האלמנט שברצונכם לגזור.
עבור תמונה במקום צבע אחיד, החילו את אותה תכונת clip-path על אלמנט <img> או על אלמנט עם background-image.

דוגמה

קלט

צורה: משושה

פלט

clip-path: polygon(50.0% 0.0%, 93.3% 25.0%, 93.3% 75.0%, 50.0% 100.0%, 6.7% 75.0%, 6.7% 25.0%);

גזירת משושה סדיר, בשימוש נפוץ לתמונות פרופיל בסגנון תג או לאייקוני פיצ'רים.

צורות בסיסיות מול polygon()

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

דפוסי clip-path נפוצים

אווטאר או תג עגול: circle() ברדיוס בינוני, לרוב בשילוב עם תמונת מקור מרובעת כדי שהעיגול לא יימתח לכדי אליפסה.
מפריד קטע אלכסוני: מצולע מותאם אישית (לא נכלל כתבנית כאן) שמטה את הקצה העליון או התחתון של קטע ברוחב מלא ליצירת שבירת עמוד לא מלבנית.
צורת אייקון דירוג כוכבים או תג: תבנית הכוכב, שימושית כצורה דקורטיבית במקום SVG מצויר ידנית במקרים פשוטים.
רשת תמונות משושה: תמונות גזורות במשושה המסודרות בפריסת חוורת דבש, דפוס נפוץ בעמודי תיק עבודות/צוות.
מלבן מעוגל כחלופה קלה ל-border-radius כשצריך שהגזירה תחתוך גם תוכן צאצא גולש, מכיוון ש-border-radius בלבד אינו גוזר צאצאים ללא overflow:hidden נוסף.

שילוב עם כלי CSS אחרים

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

→ Border Radius Generator · Box Shadow Generator

שאלות נפוצות

האם clip-path משפיעה על גודל הפריסה של האלמנט?

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

מדוע box-shadow לא מופיע על הצורה הגזורה שלי?

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

האם ניתן להנפיש או להעביר במעבר צורת clip-path?

כן, אך רק בין שני ערכי clip-path מאותו סוג ועם אותו מספר נקודות — לדוגמה, polygon() עם 6 נקודות שעובר ל-polygon() אחר עם 6 נקודות. מעבר בין צורות שונות באופן יסודי (circle() ל-polygon()) בדרך כלל לא ינפיש בצורה חלקה בכל הדפדפנים.

האם ניתן להשתמש ב-clip-path על תמונות רקע בלבד, ולא רק על תוכן האלמנט?

clip-path גוזרת את האלמנט כולו — כולל background-image, background-color, גבולות ותוכן יחד — ולא את הרקע בלבד. אם ברצונכם לגזור רק תמונת רקע תוך שמירה על שאר התוכן ללא גזירה, החילו clip-path על אלמנט נפרד שמכיל רק את הרקע.

האם clip-path נתמכת בכל הדפדפנים המודרניים?

כן — clip-path עם פונקציות צורה בסיסיות (circle, ellipse, inset, polygon) היא Baseline widely available בדפדפנים המרכזיים מאז ינואר 2020, על פי נתוני התאימות של MDN. בדרך כלל בטוח להשתמש בה בסביבת ייצור ללא חלופת גיבוי עבור גרסאות הדפדפנים הנוכחיות.