مولد دائرة CSS — نصف قطر الحدود 50%
تصميم نصف قطر حدود CSS بشكل مرئي: أربعة أشرطة تمرير زاوية مستقلة بالبكسل أو النسبة المئوية، واختصار ربط جميع الزوايا للدوائر والحبوب الفورية، بالإضافة إلى وضع النقطة العضوية بأشكال عشوائية.
النتيجة
تفتح هذه الصفحة منشئ نصف القطر الحدودي مع ربط جميع الزوايا الأربع وتعيينها على 50%، وهي القيمة التي تحول المربع إلى دائرة باستخدام CSS فقط. بصراحة: في صندوق مربع، يشكل هذا دائرة مثالية، ولكن في صندوق مستطيل، تنتج نفس النسبة 50% شكلًا بيضاويًا يشبه الاستاد، نظرًا لأن كل زاوية لا تدور إلا حول الربع الخاص بها.
هذا التمييز مهم لأن نصف قطر الحدود بنسبة 50% هو الطريقة الوحيدة الأكثر شيوعًا لإنشاء صور رمزية دائرية وشارات أيقونات ونقاط حالة في CSS - وهو أبسط بكثير من قص دائرة باستخدام قناع أو رسم واحد في SVG، ويظل واضحًا بأي حجم لأنه يمثل نسبة نسبية، وليس نصف قطر ثابت للبكسل.
قم بتبديل المربع إلى حجم مربع ثابت في CSS الخاص بك لتثبيته في الدائرة المثالية، أو اتركه مستطيلًا عمدًا للحصول على شكل يشبه القرص - وفي كلتا الحالتين، تظل الزوايا مرتبطة هنا بحيث يحافظ شريط تمرير واحد على مزامنة الأربعة جميعها أثناء نسخ CSS الناتج.