نصب وب اپلیکیشن
ابزار ساخت روبان CSS (Corner Ribbon)
روبان‌های جذاب و بدون تصویر برای نمایش تخفیف، محصولات ویژه یا جدید در گوشه المان‌های سایت ایجاد کنید. کدهای خروجی را کپی کنید و در پروژه خود استفاده نمایید.
متن روبان
موقعیت قرارگیری
رنگ‌بندی
تخفیف ویژه
HTML
CSS
راهنمای استفاده از روبان CSS
چگونه از این کد در قالب یا صفحه ساز استفاده کنم؟
مرحله ۱: المان والد (مثل یک کارت محصول یا یک باکس) باید دارای ویژگی position: relative و overflow: hidden باشد تا روبان بیرون نزند.
مرحله ۲: کد HTML تولید شده را در داخل باکس والد خود قرار دهید.
مرحله ۳: کد CSS را در بخش استایل‌های سفارشی سایت یا قالب خود پیست کنید.
چرا روبان از باکس من بیرون می‌زند؟
این اتفاق زمانی می‌افتد که به کلاس نگهدارنده اصلی (باکس شما) استایل overflow: hidden; را نداده باشید. با اضافه کردن این خط به استایل باکس والد، قسمت‌های اضافه روبان مخفی می‌شود و ظاهر مثلثی گوشه شکل می‌گیرد.