ایجاد حاشیه معکوس در المنتور با CSS – آموزش گام به گام

یکی از محدودیت‌های المنتور، نبود گزینه‌ای برای ساخت حاشیه معکوس (Inverted Border Radius) هست. به زبان ساده، المنتور فقط گوشه‌های بیرونی رو گرد می‌کنه، ولی اگه بخوای گوشه به داخل خم بشه، راه مستقیمی نداره. تو این مقاله می‌خوایم نشونت بدیم چطوری با چند خط CSS ساده می‌تونی این افکت حاشیه معکوس در المنتور رو پیاده‌سازی کنی.

حاشیه معکوس یعنی چی؟

به طور معمول وقتی توی المنتور مقدار radius رو تغییر می‌دی، گوشه‌ها به سمت بیرون گرد می‌شن. این همون چیزیه که همه جا می‌بینیم.

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

چرا المنتور این گزینه رو نداره؟

المنتور برای راحتی کاربرها ساخته شده و معمولاً تنظیمات پرکاربرد رو میاره. چون استفاده از حاشیه معکوس کمتر رایجه، توی تنظیمات پیش‌فرض المنتور جایی براش در نظر گرفته نشده. اما با کمک pseudo-element‌ها (::before و ::after) و کمی CSS، می‌تونیم این محدودیت رو دور بزنیم.

قدم اول: آماده‌سازی در المنتور

1. وارد صفحه‌ساز المنتور بشو.
2. المان یا سکشنی که می‌خوای روش حاشیه معکوس بسازی انتخاب کن.
3. وارد بخش CSS سفارشی یا همون Custom Css بشو.

نکته: اگه المنتور پرو نداری، میتونی از بخش تنظیمات پیشرفته المان، یه کلاس CSS یا همون CSS Class به المانت بدی مثل leo و بعد کدی که میخوای رو از بخش تنظیمات قالب> سفارشی سازی> CSS سفارشی وارد کنی. فقط توی خط اول کد یادت باشه بنویسی:

leo.

یعنی اول یه نقطه و بعد اسم کلاست رو بنویسی. بعدش یه آکولاد باز و بسته میکنی و کد رو توی اون قرار میدی.

قدم دوم: اضافه کردن کد CSS

حالا وقتشه که کد رو به المان اختصاص بدیم. اگه المنتور پرو داری، می‌تونی توی بخش Custom CSS کد رو بذاری. اگه نسخه رایگان داری، از سفارشی‌سازی > CSS اضافی یا افزونه‌های مخصوص CSS استفاده کن.

بسته به نوع و محل قرارگیری المان، کدهای زیر رو در بخش CSS سفارشی کپی کن.

اگر هر المانی به جز کانتینر بود

				
					/* ------------- المان بالا چپ ------------- */
selector::before,
selector::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 20px; 
  height: 100%;
  background-color: transparent;
  border-top-left-radius: 20px;
  box-shadow: 0 -20px 0 0 #FFF;
}
selector::before {
  top: 100%;
  left: 0;
}
selector::after {
  top: 0;
  left: 100%;
}


/* ------------- المان بالا راست ------------- */
selector::before,
selector::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 20px; 
  height: 100%;
  background-color: transparent;
  border-top-right-radius: 20px;
  box-shadow: 0 -20px 0 0 #FFF;
}
selector::before {
  top: 0;
  right: 100%;
}
selector::after {
  top: 100%;
  right: 0;
}


/* ------------- المان پایین چپ ------------- */
selector::before,
selector::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 20px; 
  height: 100%;
  background-color: transparent;
  border-bottom-left-radius: 20px;
  box-shadow: 0 20px 0 0 #FFF;
}
selector::before {
  bottom: 100%;
  left: 0;
}
selector::after {
  bottom: 0;
  left: 100%;
}


/* ------------- المان پایین راست ------------- */
selector::before,
selector::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 20px; 
  height: 100%;
  background-color: transparent;
  border-bottom-right-radius: 20px;
  box-shadow: 0 20px 0 0 #FFF;
}
selector::before {
  right: 100%;
  bottom: 0;
}
selector::after {
  right: 0;
  bottom: 100%;
}

				
			

اگر المان مورد نظر، کانتینر بود

				
					/* ------------- کانتینر بالا چپ ------------- */
selector::before,
selector::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 20px; 
  height: 100%;
  background-color: transparent;
  border-top-left-radius: 20px;
  box-shadow: 0 -20px 0 0 #FFF;
}
selector::before {
  top: 100%;
  left: 0;
}
selector::after {
  top: 0;
  left: 100%;
}


/* ------------- کانتینر بالا راست ------------- */
selector::before, 
selector::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 20px;
  height: 100%;
  background-color: transparent;
  border-top-right-radius: 20px;
  box-shadow: 0 -20px 0 0 #FFF;
}
selector::before {
  top: 0;
  left: -20px;
}
selector::after {
  top: 100%;
  right: 0;
}


/* ------------- کانتینر پایین چپ ------------- */
selector::before,
selector::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 20px; 
  height: 100%;
  background-color: transparent;
  border-bottom-left-radius: 20px;
  box-shadow: 0 20px 0 0 #FFF;
}
selector::before {
  top: -100%;
  left: 0;
}
selector::after {
  bottom: 0;
  left: 100%;
}


/* ------------- کانتینر پایین راست ------------- */
selector::before,
selector::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 20px; 
  height: 100%;
  background-color: transparent;
  border-bottom-right-radius: 20px;
  box-shadow: 0 20px 0 0 #FFF;
}
selector::before {
  left: -20px;
  bottom: 0;
}
selector::after {
  right: 0;
  bottom: 100%;
}
				
			

قدم سوم: شخصی‌سازی

• مقدار 20px رو هر عددی خواستی بذار تا گوشه‌ها گردتر یا تیزتر بشن.
• رنگ #FFF باید همون رنگ پس‌زمینه‌ی بخش یا صفحه باشه تا هماهنگ بشه.

نکات مهم

• یادت باشه همیشه ریسپانسیو بودن رو بعد از اعمال CSS تست کنی.
• افکت حاشیه معکوس طراحی سایتت رو خاص‌تر می‌کنه، ولی اگه بیش از حد استفاده کنی، ممکنه کاربر رو خسته کنه.
• از یه رنگ ثابت برای سایه استفاده کن تا طرح یکنواخت بشه.
• ایندکس Z المانها رو یادت نره روی 1 بذاری.

جمع‌بندی

هدف این مقاله، ایجاد حاشیه معکوس در المنتور به کمک CSS بود تا طرحهای مدرنی که طراحان سایت با این ترفند توی figma میزنن و همه خوششون میاد رو بتونی توی سایتت پیاده کنی. با اینکه المنتور به صورت پیش‌فرض گزینه‌ای برای حاشیه معکوس نداره، ولی با چند خط CSS ساده می‌تونی این افکت حرفه‌ای رو به هر المانی اضافه کنی. این کار نه تنها باعث میشه سایتت متفاوت به نظر بیاد، بلکه نشون میده به جزئیات طراحی هم اهمیت می‌دی.

اگر این مقاله رو دوست داشتی میتونی با دوستات به اشتراک بذاری تا اونها هم نحوه ایجاد حاشیه معکوس در المنتور رو یاد بگیرن. در ضمن اگه نظر یا سوالی داشتی میتونی توی کامنت‌ها برامون بنویسی یا از طریق صفحه تماس با ما، با کارشناسان ما در ارتباط باشی.

سوالات متداول ایجاد حاشیه معکوس در المنتور