מחולל clip-path

איך זה עובד

clip-path חותך אלמנט למתאר. כל מה שמחוץ לצורה לא מצויר ולא ניתן ללחיצה, ולכן זו צורה אמיתית ולא תמונה של צורה, והוא עובד על כל אלמנט, כולל תמונות ווידאו.

אחוזים, לא פיקסלים

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

הלחיצות עוקבות אחר הצורה

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

הנפשה בין צורות

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

שורת ה--webkit-

דפדפנים עדכניים זקוקים רק למאפיין ללא קידומת. ההעתק עם הקידומת כלול כי כמה גרסאות ישנות של Safari עדיין דורשות אותו, ואין מחיר להשאיר אותו.

מה הוא לא עושה

הוא חותך; הוא לא מסדר מחדש את הזרימה. הטקסט שמסביב ממשיך להתייחס לאלמנט כאל המלבן המקורי שלו. כדי שטקסט יעטוף צורה צריך shape-outside, שמקבל את אותו תחביר.