كيفية عمل border-radius مقلوب في CSS (مع المخططات)
كتب بواسطة 
إدريس الدويري
5 min read
عندما كنت أبني مولد الحدود المقلوبة، اكتشفت أن إنشاء هذا التأثير البسيط ظاهرياً يتطلب عدة طرق—كل منها له مقايضات مختلفة بين البساطة ودعم المتصفحات والمرونة البصرية.
إليكم كل ما تعلمته حول إنشاء الحدود المقلوبة، مع إيجابيات وسلبيات كل تقنية.
ما هو border-radius المقلوب؟
الحدود المقلوبة أو السالبة هي تصميم ويب حديث بزوايا مقعرة تنحني إلى داخل الصندوق بدلاً من حوله.
يمكن العثور على هذا التأثير الحديث في واجهات المستخدم في كل مكان عبر الويب:
كيفية إنشاء border-radius مقلوب؟
يمكن تحقيق الزوايا المقلوبة باستخدام إحدى هذه الخيارات الثلاثة:
- استخدام عناصر HTML أخرى والعناصر الوهمية
- استخدام خاصية CSS clip-path
- استخدام طبقة صورة القناع
استخدام عناصر متعددة
استخدام عناصر أخرى لإخفاء بعض أجزاء العنصر الرئيسي هو النهج الواضح الذي يخطر على البال لهذا التأثير.
يعمل هذا من خلال وضع عناصر أخرى أو عناصر وهمية على الزوايا التي تريد قصها، كما هو موضح أدناه:
هذا يعمل بشكل جيد على ألوان الخلفية الصلبة ويسمح بحاوية مرنة داخل المنطقة المقصوصة، والتي تتكيف مع المحتوى بداخلها.
هذه الطريقة لا تدعم خلفيات التدرج أو الصور، حيث تتطلب منك رسم المنطقة التي تريد قصها بنفس لون الخلفية لخلق وهم الحدود المقلوبة، مما لا ينطبق على خلفيات التدرج.
استخدام خاصية CSS clip-path
مهمة clip-path هي قص العناصر إلى شكل محدد مسبقاً يناسب أي خلفية، وهذا ما نريده.
دعمها الواسع للمتصفحات يعطيها ميزة لهذا التأثير. ومع ذلك، الأشكال الأساسية التي نستخدمها في الغالب مع clip-path، مثل circle() و polygon()، لن تكون مفيدة في هذه الحالة؛ بدلاً من ذلك، نحتاج للعمل مع دوال أخرى.
استخدام ClipPaths مخصصة مع url()
لهذا الخيار، نحتاج إلى إنشاء <clipPath> SVG مخصص والإشارة إليه في CSS باستخدام دالة url() الخاصة بـ clip-path.
هذا المسار يجب أن يتضمن قيم طبيعية تتراوح من 0 إلى 1، وأن يكون مغلفاً داخل عنصر SVG <clipPath> مع الخاصية clipPathUnits="objectBoundingBox". هذا مطلوب لجعل منطقة القص مستجيبة وتعمل على أي أبعاد.
هنا كيف سيبدو المسار المخصص للقص:
<svg xmlns="http://www.w3.org/2000/svg">
<clipPath id="clip" clipPathUnits="objectBoundingBox">
<path d="M0.2,0H0.3...0Z"/>
</clipPath>
</svg>يمكنك بعد ذلك الإشارة إلى معرفه في CSS الخاص بك باستخدام دالة url() الخاصة بـ clip-path، مشابه لهذا:
clip-path: url("clip");مسار SVG مخصص باستخدام دالة path()
يمكنك أيضاً استخراج قيمة خاصية d لمسار SVG التي تحدد منطقة القص للشكل المقلوب وإدراجها مباشرة في دالة path() الخاصة بـ clip-path. هذا النهج يلغي الحاجة لملفات SVG خارجية أو عناوين URI للبيانات.
clip-path: path("M45,0H118A12,12 ... ");ومع ذلك، هذه الطريقة تأتي مع قيد مهم: إحداثيات المسار التي تحددها داخل path() هي قيم مطلقة، مما يعني أن المنطقة المقصوصة ستبقى ثابتة في حجمها الأصلي بغض النظر عن كيفية تمدد العنصر. على عكس صور القناع أو مسارات القص المبنية على SVG التي تتكيف تلقائياً مع الحاوية، دالة path() لا توفر استجابة متأصلة، مما قد يسبب ظهور الحد المقلوب مشوهاً أو في موقع غير صحيح على أحجام شاشات مختلفة.
دالة shape() الجديدة في clip-path
دالة shape() الجديدة تعالج قيود القابلية للتوسع في دالة path() في clip-path من خلال دعم القيم النسبية بوحدات النسبة المئوية وتوفر الوصول إلى دوال الرياضيات CSS مثل calc()، abs()، max()، وأخرى. هذا يمكّن من مسارات قص مستجيبة حقاً تتكيف مع أبعاد العنصر.
صيغة Shape() تختلف بشكل كبير عن تدوين مسار SVG؛ فهي تستخدم أوامر قابلة للقراءة البشرية. على سبيل المثال، هنا كيفية إنشاء منطقة قص مثلثية باستخدام shape():
clip-path: shape(from 0% 0%, line to 100% 0%, line to 50% 100%, close);هذه الصيغة التصريحية أكثر سهولة من إحداثيات مسار SVG، مما يجعلها أسهل للفهم والتعديل. ومع ذلك، shape() حالياً لديها دعم محدود جداً للمتصفحات وليست جاهزة للإنتاج، لذا تبقى حلاً مستقبلياً واعداً بدلاً من بديل حالي للحدود المقلوبة.
دعم المتصفحات:
استخدام CSS Mask Image
صورة القناع هي طبقة تحدد المناطق المرئية والمخفية داخل عنصر، حيث المناطق الشفافة تكون مخفية.
الشيء الرائع في الأقنعة هو قدرتها على الحفاظ على المناطق شبه الشفافة، مما يسمح بحواف أكثر نعومة وانتقالات تدريجية. بالإضافة إلى ذلك، صور القناع تتوسع تلقائياً مع أبعاد العنصر، مما يجعلها مرنة جداً للتصاميم المستجيبة.
يمكننا استخدام الأقنعة للحدود المقلوبة عن طريق إنشاء صورة SVG أو PNG بالشكل المقلوب المطلوب والإشارة إليها في خاصية CSS mask باستخدام دالة url().
div {
aspect-ratio: 16 / 9;
mask: url('data:image/svg+xml,...') no-repeat center / contain;
}عند استخدام aspect-ratio، سيحتفظ القناع بالنسب الصحيحة عندما يتغير حجم العنصر، مما يضمن بقاء نمط الحدود المقلوبة متسقاً بصرياً عبر أحجام شاشات مختلفة.
نصيحة أساسية
عند استخدام طرق مبنية على CSS مثل clip-path أو mask للحدود المقلوبة، فكر دائماً في إضافة خاصية aspect-ratio إلى عنصرك. هذا يضمن أن أشكالك المقلوبة تحتفظ بنسبها المقصودة عبر أحجام شاشات مختلفة ويمنع التشويه عندما تتغير أحجام العناصر:
.inverted-border {
aspect-ratio: 16 / 9; /* أو أي نسبة تناسب تصميمك */
clip-path: url("clip");
}الخاتمة
إتقان الحدود المقلوبة يفتح إمكانيات إبداعية جديدة لتصميم الويب، من تفاصيل الزوايا الدقيقة إلى الأشكال الهندسية الجريئة. سواء اخترت دقة clip-path، أو مرونة صورة القناع، أو النُهج المختلطة، المفتاح هو التجريب. جرب تقنيات مختلفة، اختبر عبر الأجهزة، ولا تخف من دفع الحدود الإبداعية. سيلاحظ المستخدمون الانتباه الإضافي للتفاصيل، وهذه اللمسات الأخيرة غالباً ما تصنع الفرق بين التصميم الجيد والتصميم العظيم.
