ساخت Clip-Path در CSS (برش شکل)

ساخت clip-path در CSS با کشیدن نقاط

ویژگی clip-path در CSS به شما اجازه می‌دهد هر عنصر، از یک تصویر گرفته تا یک بخش کامل صفحه، را به شکل دلخواه برش دهید؛ بدون نیاز به ویرایش تصویر یا استفاده از SVG. مشکل این است که نوشتن دستی مختصات یک چندضلعی، مخصوصاً برای شکل‌هایی مثل ستاره یا پیکان، با آزمون‌وخطای زیادی همراه است. با ابزار ساخت clip-path تولتولیا کافی است نوع شکل را انتخاب کنید و نقاط را مستقیماً روی پیش‌نمایش بکشید؛ کد CSS هم‌زمان ساخته می‌شود.

ویژگی‌های ابزار

• چهار حالت شکل: چندضلعی، دایره، بیضی و حاشیه‌ای (مستطیل برش‌خورده با گوشه‌های گرد).
• شکل‌های آماده: مثلث، شش‌ضلعی، ستاره، پیکان، حباب گفت‌وگو، صلیب و موارد دیگر.
• ویرایش نقطه‌به‌نقطه: افزودن، حذف و کشیدن نقاط چندضلعی، با امکان چسباندن به شبکه‌ی ۵ درصدی.
• پیش‌نمایش روی تصویر خودتان: تصویر فقط در مرورگر شما پردازش می‌شود و آپلود نمی‌شود.
• خروجی CSS و Tailwind، همراه با پیشوند -webkit- برای نسخه‌های قدیمی سافاری.
• رایگان و بدون ثبت‌نام.

آموزش استفاده

1. نوع شکل را انتخاب کنید: «چندضلعی» برای شکل‌های زاویه‌دار، «دایره» و «بیضی» برای برش‌های گرد، یا «حاشیه‌ای» برای برش مستطیلی با گوشه‌های گرد.
2. در حالت چندضلعی، یکی از شکل‌های آماده را انتخاب کنید و نقاط را برای تنظیم دقیق بکشید.
3. با «افزودن نقطه» یک نقطه‌ی جدید روی بلندترین ضلع اضافه کنید. برای حذف، روی نقطه دوبار کلیک کنید یا آن را انتخاب کرده و «حذف نقطه» را بزنید.
4. در حالت‌های دایره، بیضی و حاشیه‌ای، اندازه و موقعیت را با نوارهای لغزنده تنظیم کنید.
5. برای دیدن نتیجه‌ی واقعی، تصویر خود را در پیش‌نمایش آپلود کنید.
6. کد CSS یا کلاس Tailwind را کپی کنید.

توابع clip-path در CSS

تابعکاربردنمونهpolygon()هر شکل زاویه‌دار با چند نقطهpolygon(50% 0, 100% 100%, 0 100%)circle()برش دایره‌ایcircle(50% at 50% 50%)ellipse()برش بیضیellipse(50% 35% at 50% 50%)inset()مستطیل برش‌خورده از لبه‌ها، با گوشه‌های گرد اختیاریinset(10% round 16px)

در تابع polygon()، هر نقطه با دو عدد مشخص می‌شود: فاصله از لبه‌ی چپ و فاصله از لبه‌ی بالا.

نمونه‌کدهای پرکاربرد

/* بخش هیرو با لبه‌ی پایین مورب */
.hero {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

/* آواتار شش‌ضلعی */
.avatar {
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

/* افکت ظاهر شدن تدریجی تصویر */
.reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.6s ease;
}
.reveal.is-visible {
  clip-path: inset(0 0 0 0);
}

clip-path در سایت‌های فارسی و راست‌به‌چپ

مختصات clip-path همیشه از لبه‌ی چپ عنصر اندازه‌گیری می‌شود و با تغییر جهت صفحه به راست‌به‌چپ، برعکس نمی‌شود. برای مثال، اگر در یک سایت دوزبانه بخواهید لبه‌ی مورب بخش هیرو در نسخه‌ی فارسی قرینه‌ی نسخه‌ی انگلیسی باشد، باید نسخه‌ی قرینه‌ی مختصات را جداگانه بنویسید. کافی است هر مقدار افقی x را به 100% − x تبدیل کنید:

.hero {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

[dir="rtl"] .hero {
  clip-path: polygon(100% 0, 0 0, 0 85%, 100% 100%);
}

کاربردهای رایج

• جداکننده‌ی مورب بخش‌ها: لبه‌ی مایل به‌جای خط صاف برای بخش‌های صفحه و کارت‌ها.
• آواتار دایره‌ای یا شش‌ضلعی: برش عکس پروفایل بدون تغییر فایل تصویر.
• انیمیشن ظاهر شدن: نمایش تدریجی تصویر یا متن هنگام اسکرول.
• دکمه، روبان و نشان: ساخت شکل‌هایی مثل پیکان و روبان فقط با CSS، بدون فایل تصویری.

برای گرد کردن ساده‌ی گوشه‌ها از Border Radius ساز و برای تبدیل اندازه‌ها از تبدیل واحدهای CSS تولتولیا استفاده کنید.

سؤالات متداول

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

ویژگی border-radius فقط گوشه‌های یک مستطیل را گرد می‌کند، اما clip-path می‌تواند عنصر را به تقریباً هر شکلی برش دهد؛ از مثلث و ستاره تا پیکان و شکل‌های نامتقارن.

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

بله. می‌توانید clip-path را روی هر عنصری اعمال کنید؛ چه تگ <img> باشد، چه عنصری با تصویر پس‌زمینه یا یک کادر رنگی ساده. هر چیزی که داخل کادر عنصر است، به شکل انتخابی برش می‌خورد.

آیا هنوز به پیشوند ‎-webkit-‎ نیاز است؟

نسخه‌های جدید همه‌ی مرورگرهای اصلی از نسخه‌ی بدون پیشوند پشتیبانی می‌کنند. فقط نسخه‌های قدیمی سافاری به -webkit-clip-path نیاز دارند و این ابزار برای اطمینان، هر دو را تولید می‌کند.

آیا می‌توان clip-path را متحرک کرد؟

بله، با transition یا animation؛ به شرطی که شکل شروع و پایان از یک نوع تابع باشند و در حالت چندضلعی، تعداد و ترتیب نقاط در هر دو یکسان باشد.

چرا با clip-path فضای عنصر در صفحه تغییر نمی‌کند؟

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