مولّد فواصل الأقسام بـ CSS

فواصل الأسطر البسيطة

/* Subtle horizontal rule */
.divider {
  height: 1px;
  background: #e5e7eb;
  border: 0;
  margin: 3rem 0;
}

/* With text in the middle */
.divider-text {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #6b7280;
}
.divider-text::before,
.divider-text::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

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

حيلة clip-path:

.hero {
  background: #0f172a;
  color: white;
  padding: 4rem 1rem;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 48px));
}

تُسحب الزاوية السفلية اليسرى للأعلى بمقدار 48 بكسل، مما يُنشئ ميلًا قطريًا. لكي يكون الانتقال نظيفًا، يجب أن يبدأ القسم التالي ملاصقًا للميل تمامًا، دون أي فجوة بيضاء.

وللحصول على قطر يسير في الاتجاه المعاكس، بدّل الزاوية السفلية التي تُرفع. وللحصول على شقّ أو شكل متعرّج، أضِف المزيد من الرؤوس.

فواصل الموجات بصيغة SVG

SVG هي أنظف طريقة لعمل منحنيات عضوية:

<div class="hero">…</div>
<svg class="wave" viewBox="0 0 1440 80" preserveAspectRatio="none">
  <path d="M0 80 C 360 0, 1080 0, 1440 80 L 1440 80 L 0 80 Z"
        fill="white"/>
</svg>

.wave {
  display: block;
  width: 100%;
  height: 60px;
  margin-top: -1px; /* close any subpixel gap */
}

يتيح preserveAspectRatio="none" امتداد SVG إلى عرض الحاوية بغض النظر عن أبعاد المصدر. يقوم margin-top: -1px بإغلاق الفجوة الدقيقة التي يتركها بعض العارضين.

مكتبة الفواصل الشائعة

مقتطفات مفيدة:

نصائح

• مطابقة موضع الالتقاء. يجب أن تتطابق خلفية الفاصل (تعبئة SVG أو لون القسم المائل) مع خلفية القسم التالي تمامًا. فاختلاف الدرجة اللونية بمقدار 1 بكسل يفسد التأثير.
• تجنب المنحنيات الثقيلة على الشاشات الضيقة. يمكن للموجة التي تبدو أنيقة عند 1440 بكسل أن تبدو وكأنها جيب مضغوط عند 360 بكسل. استخدم سعة أصغر على الهاتف المحمول عبر استعلامات الوسائط، أو مسار SVG مختلف.
• لا تقم بتكديس فواصل متعددة. التماس واحد لكل حدود القسم يكفي.
• الأداء. فواصل SVG المضمّنة لا يُذكر تأثيرها؛ أما الفواصل المعتمدة على الصور فتكلّف طلب شبكة. الفواصل المضمّنة بـ SVG هي الأفضل.