انتقال بين قسمين

حيث يلتقي قسمان مختلفا اللون في منتصف صفحة. والطبقات هنا تعمل أكثر مما تعمل في أي مكان آخر، لأن هناك لونين يجب التوفيق بينهما لا حافة واحدة تُزيَّن.

الوصفة

خطوة بخطوة

• اختر موجات متراكبة للحصول على عدة منحنيات من بذرة واحدة.
• اضبط اللونين على لوني القسمين الأعلى والأسفل.
• صدّر بصيغة خلفية CSS وطبّقه على div فارغ قصير بين القسمين.
• امنح ذلك الـ div ارتفاعًا ثابتًا — فصورة الخلفية ليس لها ارتفاع ذاتي يمنحه إياه.

.shape {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M-288 95.89C-240 100.43,-96 109.48,0 123.14C96 136.8,192 170.05,288 177.86C384 185.66,480 180.48,576 169.98C672 159.48,768 126.46,864 114.84C960 103.23,1056 95.46,1152 100.31C1248 105.15,1392 136.65,1440 143.92L1440 320L-288 320Z' fill='%23a5b4fc' opacity='0.35'…

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

الـ div الفارغ هو الجزء الجدير بالضبط. فـ `background-image` لا تحدّد مقاس عنصرها، وبذلك يكون div بلا ارتفاع هو div بلا شكل بداخله — وهذا أشيع سبب لظهور هذه الوصفة وكأنها لا تفعل شيئًا. امنحه ارتفاعًا بالوحدات نفسها التي لبقية تباعداتك واضبط `background-size: cover` ليملأه الشكل عند أي عرض.

أسئلة

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