UTILS.
حریم خصوصی از ابتدا
◇

تولیدکننده clip-path در CSS

یک عنصر را به شکل‌های رایج برش بزنید و کد clip-path CSS را کپی کنید.

فایل‌هایتان در همین دستگاه می‌مانند

فایل‌ها در مرورگرتان پردازش می‌شوند و هرگز بارگذاری نمی‌شوند. سایت کد و منابع لازم برای اجرای ابزارها را دریافت می‌کند. بدون حساب یا ردیاب.

با گزینهٔ دانلود، این ابزار را در یک فایل HTML ذخیره کنید تا آفلاین استفاده شود.

حریم خصوصی →

یک مثال حل‌شده را امتحان کنید

مثال

شکل شش‌ضلعی را انتخاب کنید تا clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); به دست آید. هر جفت یک موقعیت x و y درون عنصر است، پس شکل همراه با عرض و ارتفاع عنصر کشیده می‌شود.

به یاد داشته باشید

برش بخشی از عنصر را پنهان می‌کند اما کادر چیدمان آن را نگه می‌دارد: عناصر کناری جابه‌جا نمی‌شوند و گوشه‌های پنهان دیگر کلیک نمی‌گیرند. حاشیه‌ها و سایه کادر هم بریده می‌شوند؛ اگر سایه لازم دارید، فیلتر drop-shadow را روی عنصر دربرگیرنده بگذارید.

درباره این ابزار

یک شکل انتخاب کنید تا بلافاصله یک کادر پیش‌نمایش با قاعده‌ی clip-path متناظر برش بخورد، سپس کد CSS آماده‌ی استفاده را کپی کنید. پیش‌نمایش به‌صورت زنده و کاملاً در مرورگر شما به‌روز می‌شود.

پرسش‌های پرتکرار

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

ابزارهای بیشتر