0

مولد CSS Squircle - مربع مدور

تصميم نصف قطر حدود CSS بشكل مرئي: أربعة أشرطة تمرير زاوية مستقلة بالبكسل أو النسبة المئوية، واختصار ربط جميع الزوايا للدوائر والحبوب الفورية، بالإضافة إلى وضع النقطة العضوية بأشكال عشوائية.

12px
12px
12px
12px
جارٍ المعالجة... 0%

النتيجة

تفتح هذه الصفحة مولد نصف القطر الحدودي مع ربط جميع الزوايا الأربع بنسبة 30%، وهو تقريب معتدل يقع بين مربع حاد ودائرة كاملة. إنها ليست دائرة رياضية حقيقية (شكل قطع ناقص)، ولكنها أقرب ما يمكن أن تحصل عليه خاصية CSS واحدة، وهي القيمة التي تصل إليها معظم أنظمة التصميم عندما تريد ذلك المظهر.

يأتي الاسم من أيقونات التطبيقات المربعة المستديرة التي شاعها نظام التشغيل iOS: منحنى كافٍ في كل زاوية للشعور بالنعومة والود، ولكن ليس كثيرًا بحيث يبدو الشكل مستديرًا. تعتمد مربعات الأيقونات والصور المصغرة للبطاقات وإطارات الصور الرمزية الحديثة على أنصاف أقطار في نفس النطاق التقريبي لهذا السبب بالضبط.

ادفع شريط التمرير المرتبط لأعلى للحصول على ملمس أكثر نعومة ودائرية أو لأسفل للحصول على شكل أكثر وضوحًا ومربعة - يتم تحديث خط CSS مع كل تغيير، ويكون جاهزًا للنسخ بمجرد أن يصبح المنحنى مناسبًا لأيقونتك أو بطاقتك.