مولد Clip-Path در CSS

این ابزار چه کاری انجام می‌دهد

مولد CSS Clip-Path به شما امکان می‌دهد هر عنصری را به‌صورت بصری شکل دهید، بدون اینکه آن را دستی بنویسید polygon() مختصات. یک حالت انتخاب کنید — چندضلعی، دایره، بیضی یا inset — دستگیره‌ها را مستقیماً روی پیش‌نمایش بکشید تا CSS در لحظه به‌روزرسانی شود. یکی از 13 الگوی آمادهٔ شکل (مثلث، شش‌ضلعی، ستاره، پیکان، حباب گفت‌وگو، صلیب و موارد دیگر) را به‌عنوان نقطهٔ شروع بارگذاری کنید، یا یک چندضلعی کاملاً سفارشی را نقطه‌به‌نقطه بسازید.

می‌توانید clip-path را روی یک گرادیان ساده پیش‌نمایش کنید یا تصویر خودتان را بارگذاری کنید تا دقیقاً ببینید عکس یا گرافیک اصلی پس از اعمال شکل چگونه نمایش داده می‌شود. وقتی از نتیجه راضی بودید، CSS ساده را کپی کنید (همراه با -webkit- پیشوند برای Safari قدیمی هم گنجانده شده است) یا یک کلاس آماده Tailwind با مقدار دلخواه.

نحوهٔ استفاده از ابزار ساخت CSS clip-path

• یک نوع شکل انتخاب کنید: چندضلعی برای شکل‌های سفارشیِ زاویه‌دار، دایره یا بیضی برای برش‌های گرد، یا فاصله داخلی برای یک برش مستطیلیِ گوشه‌گرد.
• در حالت Polygon، برای شروع روی یکی از الگوهای آماده کلیک کنید (ستاره، شش‌ضلعی، پیکان، متوازی‌الاضلاع و موارد دیگر)، سپس هر نقطه سفید را بکشید تا شکل را دقیق‌تر تنظیم کنید.
• استفاده از افزودن نقطه تا یک رأس جدید روی طولانی‌ترین ضلع ایجاد شود، یا برای حذف یک نقطه روی آن دوبار کلیک کنید.
• به حالت Circle، Ellipse یا Inset بروید و از نوارهای لغزنده برای تنظیم شعاع، موقعیت، فاصله از لبه‌ها یا گردی گوشه‌ها استفاده کنید.
• برای پیش‌نمایش برش دقیق روی عکس واقعی خود، به‌جای یک رنگ جایگزین، تصویر بارگذاری کنید.
• CSS تولیدشده یا کلاس Tailwind را کپی کنید و مستقیماً در شیوه‌نامه یا نشانه‌گذاری خود جای‌گذاری کنید.

موارد استفاده رایج

• جداکننده‌های زاویه‌دارِ بخش‌ها — با استفاده از یک clip-path چندضلعی یا ذوزنقه‌ای، به بخش اصلی یا کارت یک لبه مورب بدهید، نه یک خط صاف.
• آواتارهای دایره‌ای یا شش‌ضلعی — عکس پروفایل را بدون دست‌کاری فایل تصویر اصلی، به شکل دایره، شش‌ضلعی یا یک نشان سفارشی برش دهید.
• انیمیشن‌های آشکارسازی تصویر — بین دو مقدار clip-path (برای مثال inset(100%) و inset(0%)) پویانمایی ایجاد کنید تا هنگام پیمایش، افکت ظاهرشدن تدریجی ایجاد شود.
• دکمه‌ها و نشان‌های سفارشی — شکل‌های چورون، روبان و پیکان را کاملاً با CSS بسازید؛ بدون نیاز به فایل‌های تصویری اضافی یا ماسک‌های SVG.

پرسش‌های متداول

تفاوت clip-path و border-radius چیست؟

border-radius فقط گوشه‌های یک کادر را گرد می‌کند. clip-path می‌تواند شکلی با تقریباً هر میزان پیچیدگی برش دهد — چندضلعی، دایره، بیضی یا مستطیلِ تو‌رفته با گوشه‌های گرد — بنابراین برای برش‌های زاویه‌دار، ستاره‌ها، پیکان‌ها یا هر برش غیرمستطیلی ابزار مناسبی است.

آیا clip-path روی تصاویر پس‌زمینه هم کار می‌کند؟

بله. اعمال کن clip-path مستقیماً روی هر عنصری که background-image دارد، یک واقعی <img>، یا یک رنگ یکدست <div> — این شکل هر چیزی را که داخل کادر عنصر باشد برش می‌دهد.

آیا هنوز برای clip-path به پیشوند vendor نیاز است؟

نسخه‌های جدید Chrome، Firefox و Edge از نسخهٔ بدون پیشوند پشتیبانی می‌کنند clip-path. نسخه‌های قدیمی‌تر Safari همچنان به -webkit-clip-path، به همین دلیل این مولد هر دو را به‌طور خودکار تولید می‌کند.

آیا می‌توانم شکل clip-path را با transitionهای CSS متحرک کنم؟

بله، به‌شرطی که چندضلعی در هر دو انتها تعداد نقاط یکسانی داشته باشد و این نقاط به همان ترتیب قرار گرفته باشند — مرورگرها موقعیت هر نقطه را درون‌یابی می‌کنند و همین امکان ایجاد افکت‌های wipe و reveal را فراهم می‌کند.

چرا clip-path روی چیدمان یا ناحیه کلیک عنصر من تأثیری ندارد؟

clip-path فقط آنچه را رسم می‌شود تغییر می‌دهد، نه مدل جعبه — عنصر همچنان فضای اصلی خود را اشغال می‌کند و بخش‌های بریده‌شده دیگر قابل‌کلیک نیستند، اما padding، margin و چیدمان تغییری نمی‌کنند.