SVG / الأقسام

فاصل الأشكال SVG: حواف الأقسام وطبقاتها

أنشئ 8 أشكال لفواصل الأقسام باستخدام SVG، مع ضبط السعة والتردد والارتفاع، وقلب الشكل، والملء المعكوس، وما يصل إلى 3 طبقات. عاين القسم وانسخ SVG وCSS وHTML.

فاصل الأشكال SVG: حواف الأقسام وطبقاتها: اختر حافة على شكل موجة أو منحنى أو ميل أو مثلث أو سهم أو خط متعرج أو سحابة أو جبل، واضبط الارتفاع والسعة وعدد التكرارات، ثم اقلب الشكل أو اعكسه، واجمع ما يصل إلى 3 طبقات. يتمدد الفاصل ليلائم أي عرض للصفحة؛ انسخ SVG أو CSS الخاص بالتموضع أو قسم HTML جاهزاً. يعمل 100% محليًا في المتصفح، من دون رفع أي ملفات إلى الخادم.

الفئة
أدوات المطورين
مرات التشغيل
في المتصفح
التكلفة
مجاني · بلا تسجيل
التوفر
جاهز للاستخدام
فاصل أشكال SVGمعالجة محلية

تعمل بالكامل في المتصفح

معاينة القسم

تغيير للمشهد.

حافة بتصميم بين قسمين.

فاصل القسم
رمز SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="160" viewBox="0 0 1200 160" preserveAspectRatio="none"><g fill="#63c42d" transform="matrix(1 0 0 1 0 0)"><path d="M0,102.8 C28.6,95 114.3,57.1 171.4,55.8 C228.6,54.5 285.7,94.5 342.9,94.9 C400,95.3 457.1,58.7 514.3,58.3 C571.4,58 628.6,92.5 685.7,92.6 C742.9,92.7 800,57.1 857.1,58.9 C914.3,60.6 971.4,102.9 1028.6,103.3 C1085.7,103.7 1171.4,68.1 1200,61.1 L1200,160 L0,160 Z" opacity="1"/></g></svg>
تحديد موضع CSS
.section { position: relative; overflow: hidden; padding-bottom: 160px; }
.section-divider { position: absolute; left: 0; bottom: 0; width: 100%; height: 160px; pointer-events: none; }
.section-divider svg { display: block; width: 100%; height: 100%; }
قسم HTML
<section class="section">
  <div class="section-divider" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1200" height="160" viewBox="0 0 1200 160" preserveAspectRatio="none"><g fill="#63c42d" transform="matrix(1 0 0 1 0 0)"><path d="M0,102.8 C28.6,95 114.3,57.1 171.4,55.8 C228.6,54.5 285.7,94.5 342.9,94.9 C400,95.3 457.1,58.7 514.3,58.3 C571.4,58 628.6,92.5 685.7,92.6 C742.9,92.7 800,57.1 857.1,58.9 C914.3,60.6 971.4,102.9 1028.6,103.3 C1085.7,103.7 1171.4,68.1 1200,61.1 L1200,160 L0,160 Z" opacity="1"/></g></svg></div>
</section>

استخدم لون خلفية القسم التالي لإنشاء حافة متصلة. اقلب رأسيًا عند نقل فاصل سفلي إلى الأعلى.

المسارات المغلقة والإحداثيات

يعرّف SVG 2 أوامر closepath والمسارات التكعيبية: https://www.w3.org/TR/SVG2/paths.html . يربط viewBox هذه الإحداثيات بمنطقة العرض: https://www.w3.org/TR/SVG2/coords.html

مصدر الأشكال

يستخدم شكل الموجة المنحنيات الناعمة نفسها الموجودة في SVG Wave Generator وSVG Blob Generator؛ أما الأشكال الأخرى فرُسمت باستخدام صيغ بسيطة. لا تتضمن الأداة رسومات من جهات خارجية، لذا يمكنك استخدام الناتج كما تشاء.

طريقة الاستخدام

  1. اختر شكلاً واضبط السعة والتردد والارتفاع.
  2. حدّد الطبقات والشفافية واللون، ثم اختر حافة القسم وأي عمليات قلب.
  3. انسخ SVG وCSS الخاص بالتموضع وHTML الخاص بالقسم، أو نزّل ملف SVG.

الخصوصية والقيود

يتم إنشاء الأشكال وتنزيلها بالكامل في المتصفح.

أدوات ذات صلة

موجة SVGشكل SVG عضويأنماط CSS

الأسئلة الشائعة

كيف أجعل الحافة تمتزج مع قسم آخر؟

استخدم لون خلفية ذلك القسم كلون لملء الفاصل. يحجز CSS مساحة للفاصل ويضعه بشكل مطلق عند الحافة المختارة.

ما الفرق بين هذه الأداة وأداة الموجات؟

تضيف هذه الأداة 7 أشكال أخرى، وخيار العكس، وHTML خاصاً بالقسم. يوفّر SVG Wave Generator موجات عشوائية وعناصر تحكم إضافية مخصصة للموجات. أما SVG Blob Generator فينشئ أشكالاً عضوية مستقلة.

ماذا يفعل خيار العكس؟

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

أداة مجانية · عدد مرات الاستخدام في المتصفح · لا يتطلب حسابًا