‏وصل کردن دو دایره با خط منحنی به کمک border-shape در CSS

نویسنده تو قسمت قبلی این مجموعه با anchor positioning (یعنی چسبوندن جای یه المان به جای یه المان دیگه، فقط با CSS) دو دایره رو با یه فلش به هم وصل کرده بود. حالا می‌خواد اون شکل ساده رو با یه خط منحنی قشنگ عوض کنه. ابزارش border-shape هست. فعلاً فقط کروم و اج همه‌ی این قابلیت‌ها رو کامل پشتیبانی می‌کنن و دموها تو فایرفاکس و سافاری درست نشون داده نمی‌شن.

فرق border-shape با clip-path اینه که clip-path همه چی رو می‌بُره، از جمله border. ولی border-shape به کل المان شکل می‌ده و border، سایه و outline رو نگه می‌داره. ترفند اصلی مقاله اینه: با shape() فقط یه مسیر منحنی بکشی، پس‌زمینه رو برداری و با border ضخامت و رنگ خط رو تعیین کنی. اینطوری فقط خود خط دیده می‌شه.

.shape {
  border: 10px solid #000;
  border-shape: shape(from 0 0,curve to 100% 100% with 100% 0);
}

پیاده‌سازی واقعی چندتا گیر داشت. ساختار لینک چهارتا المان داره که هر بار فقط یکیش اندازه داره و بقیه اندازه‌شون صفره. ولی border بهشون اندازه می‌داد و هر چهارتا دیده می‌شدن. راه‌حل این بود که شکل بره روی یه pseudo-element. بعد برای اینکه سر و ته خط دقیقاً وسط دایره‌ها بیفته، مقدار border-box به آخر border-shape اضافه شد. برای مخفی کردن المان‌های بی‌اندازه هم از sign() روی واحدهای container query مثل 1cqw و 1cqh استفاده شده، که اگه عرض یا ارتفاع صفر باشه نتیجه صفر می‌شه.

یه مشکل دیگه هم بود: با border دوازده پیکسلی، pseudo-element نمی‌تونه از ۲۴ پیکسل کوچیک‌تر بشه و موقع کشیدن دایره‌ها خط پرش داشت. نویسنده به جای inset: 0 از inset: -12px استفاده کرده و border-box رو به padding-box عوض کرده. اینطوری سرریز همیشه یکسانه و خط همه جا درست می‌مونه. خودش می‌گه پیدا کردن این تنظیمات براش هم سخت بوده.

بعدش شکل خط قشنگ‌تر شده: یه منحنی تا وسط و بعد دستور smooth که قرینه‌ی همون منحنی رو تا گوشه‌ی دیگه می‌کشه. با if() و container query هم اگه فاصله‌ی افقی یا عمودی کمتر از ۲۰۰ پیکسل باشه، خط صاف می‌شه. نکته‌ی جالب اینه که اگه هر دو حالت ساختار یکسانی داشته باشن و فقط نقطه‌ی کنترل with عوض بشه، با transition: border-shape .3s تغییر بینشون نرم انجام می‌شه. pseudo-element دوم هم برای کشیدن سر و ته خط استفاده می‌شه و قراره قسمت سومی هم با مثال‌های بیشتر بیاد.

نکات کلیدی:

• border-shape برخلاف clip-path حاشیه، سایه و outline المان رو نگه می‌داره.
• فعلاً فقط کروم و اج این ترکیب از قابلیت‌ها رو کامل پشتیبانی می‌کنن.
• با inset: -12px و مقدار padding-box خط همیشه از مرکز دایره‌ها شروع می‌شه و پرش نداره.
• if() همراه با 100cqw و 100cqh شکل خط رو بر اساس فاصله‌ی دو دایره (مرز ۲۰۰ پیکسل) عوض می‌کنه.
• اگه دو شکل ساختار یکسان داشته باشن، transition روی border-shape تغییرشون رو نرم می‌کنه.