0

مولد شكل النقطة العضوية CSS

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

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

النتيجة

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

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

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