كتلة بلا أي SVG

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

الوصفة

خطوة بخطوة

• انتقل إلى مولّد الكتل واختر حصاة.
• اختر border-radius في CSS من صف التصدير.
• انسخ التصريح إلى أي عنصر له عرض وارتفاع سلفًا.
• عدّل العشوائية وأعد النسخ حتى يلائمك الظلّ الخارجي — فليس أمامك سوى أربع زوايا للعمل بها.

.blob {
  width: 320px;
  height: 320px;
  border-radius: 46% 52.2% 40.5% 40% / 49.8% 56.1% 39.1% 45%;
}

بمزيد من التفصيل

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

أسئلة

كل رقم وكل شكل في هذه الصفحة أُنتج بتشغيل المولّد وقت البناء، فهو يصف الأداة التي أنت على وشك استخدامها لا نسخة كانت موجودة يومًا.