เครื่องสร้างเส้นแบ่งส่วน 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 พิกเซล ควรลดขนาดของแอมพลิจูดในการแสดงผลบนอุปกรณ์เคลื่อนที่ โดยใช้ฟังก์ชัน media queries หรือใช้เส้นทาง SVG ที่แตกต่างออกไป
• อย่าวางเส้นแบ่งหลายเส้นซ้อนกัน การใช้เส้นแบ่งเพียงเส้นเดียวที่ขอบแต่ละส่วนก็เพียงพอแล้ว
• ประสิทธิภาพ: ตัวแบ่งข้อความแบบ SVG ที่แสดงในรูปแบบอินเลน (inline) มีผลกระทบต่ำมาก ในขณะที่ตัวแบ่งข้อมูลที่ใช้ภาพจะทำให้เกิดการขอข้อมูลจากเครือข่าย ดังนั้น SVG แบบอินเลนจึงมีข้อได้เปรียบเหนือกว่า