گرد کردن گوشه های داخلی

گرد کردن گوشه های داخلی

صورت مسئله

گاهی نیاز داریم تا نگهدارنده ای مثل شکل زیر داشته باشیم که گوشه هایش از سمت بیرون تیز و از سمت داخل گرد است.

 

گوشه های داخلی گرد در css

 

یک راه حل نه چندان جالب استفاده از دو عنصر است که می توان گوش های عنصر داخلی را با border-radius گرد کرد و عنصر بیرونی با لبه های تیز باقی بماند:

 


div.dad {
  background: #655;
  padding: .8em;
}

div.dad > div {
  background: tan;
  border-radius: .8em;
  padding: 1em;
}

 

این راه حل بخوبی جواب می دهد اما مجبوریم که از دو عنصر استفاده کنیم در صورتی که برای یک متن فقط یک نگهدارنده مورد نیاز است. آیا راه حلی هست که بتوان فقط با یک عنصر این کار را انجام داد؟

 

راه حل

همانطور که در این مطلب گفته شده, outline گرد بودن یک عنصر را دنبال نمی کند و اما box-shadow زمانی که عنصر لبه های گرد دارد, گرد ترسیم می شود.

 
outline
 

boxshadow
 

ما از ترکیب این دو موضوع برای رسیدن به هدفمان استفاده می کنیم. فقط کافی است که بصورت زیر عمل کنیم تا با استفاد از فقط یک عنصر به نتیجه مطلوب برسیم:

 


background: tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .4em #655;
outline: .6em solid #655;

 

در تصویر زیر با آبی کردن رنگ سایه این موضوع به تصویر کشیده شده است که چگونه فاصله خالیی که outline با عنصر در گوشه ها بوجود می آورد را بوسیله box-shadow پر می کنیم:

 
boxshadow-outline
 

حال سوال اینجا است که اندازه box-shadow را چند در نظر بگیریم؟ فرمول پایین تصویر, جواب ما خواهد بود:
 
calc-radius
 

توجه داشته باشید که در فرمول بالا r اندازه border-radius است.

در مثال ما حاصل فرمول بعد از گرد کردن مقدار 0.34em است. ولی نیازی نیست که هر دفعه این محاسبه را انجام دهیم کافی است همیشه اندازه box-shadow را نصف اندازه border-radius در نظر بگیریم.

دو نکته

اول اینکه در این روش اندازه outline نمی تواند کوچکتر از اندازه محسابه شده برای box-shadow باشد.

و نکته دوم اینکه در آینده ی سی اس اس این احتمال وجود دارد که گوشه های outline زمانی که عنصرمان گوشه های گرد داشته باشد, گرد شود.

در دموی زیر با تغییر مقادیر, نکات گفته شده را بررسی کنید:

 

See the Pen Inner rounding by Mojtaba Seyedi (@seyedi) on CodePen.


 

منبع