مولد clip-path در CSS
با کشیدن نقطهها شکل بسازید و کد clip-path را برای چندضلعی، دایره، بیضی و inset بگیرید.
نقطهها را بکشید؛ برای افزودن دابلکلیک و برای حذف روی نقطه راستکلیک کنید (حداقل ۳ نقطه).
دربارهی مولد clip-path در CSS
خصوصیت clip-path فقط ناحیهٔ نمایش یک عنصر را میبُرد و در چیدمان صفحه هیچ فضایی آزاد نمیکند؛ پس بخشهای بریدهشده همچنان کلیک و هاور را دریافت میکنند مگر آنکه pointer-events را مدیریت کنید. با این ابزار رأسهای چندضلعی را مستقیم روی پیشنمایش میکشید و کد دقیق clip-path را برای پالیگون، دایره، بیضی و inset میگیرید. مقادیر بر حسب درصدِ خودِ عنصر خروجی میشوند تا شکل واکنشگرا بماند.
راهنمای استفاده از مولد clip-path در CSS
- 1
حالت را انتخاب کنید: چندضلعی، دایره، بیضی یا inset؛ یا شکل آمادهای مثل ستاره و حباب گفتار را بارگذاری کنید.
- 2
دستگیرهها را روی پیشنمایش بکشید تا شکل دلخواه ساخته شود.
- 3
در حالت چندضلعی با دابلکلیک نقطه اضافه و با راستکلیک روی دستگیره آن را حذف کنید.
- 4
در صورت نیاز تصویر خودتان را بارگذاری کنید تا برش روی محتوای واقعی دیده شود.
- 5
کد clip-path را کپی و در استایل عنصر خود قرار دهید.
پرسشهای متداول
تفاوت clip-path با overflow: hidden چیست؟
overflow فقط میتواند محتوا را در یک مستطیل ببُرد، اما clip-path هر مسیر هندسی مانند چندضلعی، دایره یا بیضی را میپذیرد و ناحیهٔ بیرون کاملاً شفاف میشود؛ در عوض clip-path برخلاف overflow اسکرول محتوا را کنترل نمیکند.
چرا سایهٔ box-shadow روی عنصر بریدهشده ناپدید میشود؟
چون clip-path سایه را هم همراه با عنصر میبُرد. برای سایهای که لبهٔ برش را دنبال کند باید بهجای box-shadow از filter: drop-shadow() روی همان عنصر یا والد آن استفاده کنید.
آیا میتوان clip-path را انیمیشن داد؟
بله، اما فقط زمانی که نوع شکل و تعداد نقاط بین دو حالت یکسان بماند؛ میتوان بین دو پالیگون با شمار نقاط برابر transition گذاشت، ولی تبدیل دایره به پالیگون یا تغییر تعداد رأسها انیمیشنپذیر نیست.
مقادیر درصدی نسبت به چه چیزی حساب میشوند؟
نسبت به border-box خودِ عنصر، نه صفحه یا ویوپورت. در circle شعاعِ درصدی به یک قطر مرجع بر پایهٔ ابعاد عنصر گره میخورد؛ به همین دلیل پیشنمایش این ابزار مربع است تا دایره دقیق نمایش داده شود.