Softonic

เครื่องมือสร้างเส้นแบ่ง SVG

ขั้นตอน 1 / 3
ถัดไป

ปัจจุบันหน้าเว็บสำหรับการลงจอดแทบไม่มีรอยต่อแนวนอนที่ชัดเจนระหว่างส่วนต่าง ๆ ที่มีสีอีกต่อไป เพราะส่วนต่าง ๆ จะผสมผสานกันอย่างลื่นไหลผ่านรูปคลื่นโค้ง เส้นลาดเอียง หรือแถวสามเหลี่ยม ซึ่งล้วนเป็นรูปทรงง่าย ๆ ในรูปแบบ SVG ได้แก่ รูปทรงกรอบที่มีขนาดเท่ากับความกว้างของหน้าเว็บ รูปหลายเหลี่ยมหรือเส้นทางที่เติมด้วยสีพื้นหลังของส่วนถัดไป และยึดติดอยู่ที่ด้านล่างของส่วนก่อนหน้า โปรแกรมสร้างรูปทรงนี้รองรับ 5 สไตล์ ได้แก่ คลื่น โค้ง เส้นลาด เส้นสามเหลี่ยม และบันได โดยสามารถปรับความกว้าง ความสูง สี และการพลิกแนวตั้งตามที่ต้องการได้

วิธีการสร้างแผ่นแบ่งส่วน

  1. 1

    เลือกสไตล์

    คลื่น (เส้นโค้ง S), เส้นโค้ง (โค้งเดี่ยว), ความชัน (แนวทแยงมุม), รูปสามเหลี่ยม (รูปซิกแซก), บันได (แบบขั้น)

  2. 2

    ตั้งค่าความกว้างและความสูง

    ความกว้าง = ความกว้างของหน้า (1200–1920 พิกเซล) ส่วนความสูง = ความสูงของแถบแบ่ง (โดยทั่วไปอยู่ที่ 50–200 พิกเซล)

  3. 3

    เลือกวิธีการเติมสี

    เลือกสีพื้นหลังของส่วนถัดไป เพื่อให้แถบแบ่งสามารถผสมผสานเข้ากับส่วนนั้นได้อย่างกลมกลืน

  4. 4

    พลิกในแนวตั้ง

    เปลี่ยนโหมดของ flipY เพื่อพลิกรูปร่าง หากคุณต้องการให้มันชี้ขึ้นแทนที่จะชี้ลง

  5. 5

    คัดลอกไฟล์ SVG

    ให้ติดตั้งไว้ที่ด้านล่างของส่วนที่ส่งออก หรือด้านบนของส่วนที่รับเข้ามา โดยใช้ `preserveAspectRatio="none"` (ซึ่งรวมอยู่แล้ว) เพื่อให้รูปร่างสามารถยืดตามขนาดของวิวได้

สไตล์ทั้งห้าและเวลาที่ควรใช้แต่ละสไตล์

สไตล์ บรรยากาศ เหมาะสำหรับการใช้งานร่วมกัน
คลื่น นุ่มนวลและเป็นมิตร ฮีโร่ → คำรับรองจากลูกค้า และโทนสีพาสเทล
เส้นโค้ง ดูสะอาดและสง่างาม ตารางฟีเจอร์ → CTA และการออกแบบแบบมินิมอล
เส้นลาด ทันสมัยและเด่นชัด ฮีโร่สีเข้ม → เนื้อหาสีอ่อน และธีมที่มีความตัดกันสีสันสูง
รูปสามเหลี่ยม เน้นความแม่นยำและด้านเทคนิค เครื่องมือสำหรับนักพัฒนา และแดชบอร์ดแบบ SaaS
บันได แบบมีโครงสร้าง แนวรีโทร ตารางราคา และรูปแบบการจัดวางเนื้อหา

การวางเส้นแบ่งในโค้ดการกำหนดลักษณะ

ตำแหน่งปกติที่ด้านล่างของส่วนหนึ่ง:

<section class="hero">
  <!-- hero content -->
  <div class="divider" aria-hidden="true">
    <!-- paste the SVG here -->
  </div>
</section>
<section class="next">…</section>

.hero { position: relative; }
.divider {
  position: absolute; bottom: 0; left: 0; width: 100%; line-height: 0;
}
.divider svg { width: 100%; height: auto; display: block; }

ทำไมถึงเป็น preserveAspectRatio="none"

โดยค่าเริ่มต้น SVG จะถูกปรับขนาดอย่างสม่ำเสมอ สำหรับตัวแบ่งที่ครอบคลุมพื้นที่แสดงผล ควรให้รูปร่างยืดออกในแนวราบ, คือทอดตัวจากขอบไปยังขอบอย่างเต็มที่ โดยไม่ใช่เพียงเส้นเล็กๆ ที่อยู่ตรงกลางหน้าจอ preserveAspectRatio="none" กำหนดให้ระบบแสดงผลสามารถบิดเบือนอัตราส่วนภาพได้อย่างอิสระ ซึ่งเป็นสิ่งที่ตัวแบ่งจำเป็นต้องมี

ความสามารถในการเข้าถึงและ SEO

  • ทำเครื่องหมายให้กับตัวห่อ (wrapper) aria-hidden="true" เพื่อให้โปรแกรมอ่านหน้าจอสามารถข้ามรูปทรงตกแต่งได้
  • ควรรักษาระดับขนาดของไฟล์ SVG ให้อยู่ต่ำกว่าไม่กี่กิโลไบต์ เนื่องจากไฟล์ SVG ขนาดใหญ่ที่แสดงในรูปแบบ inline จะทำให้กระบวนการวิเคราะห์โครงสร้าง DOM เกิดความล่าช้า ผลลัพธ์ที่ได้มีขนาดน้อยกว่า 1 กิโลไบต์อย่างมาก
  • ควรหลีกเลี่ยงการใช้ภาพรูปแบบราสเตอร์สำหรับเส้นแบ่ง เพราะภาพเหล่านี้จะปรากฏเป็นพิกเซลบนจอแสดงผลขนาดกว้างมากและจอ Retina

คำถามที่พบบ่อย

ไม่ได้กำหนดอย่างเคร่งครัดนัก เพราะแอตทริบิวต์ width ของ SVG จะกำหนดขนาดโดยธรรมชาติ แต่เมื่อใช้ร่วมกับ preserveAspectRatio="none" และ CSS width: 100% รูปร่างจะเติมเต็มพื้นที่ภายในคอนเทนเนอร์ทั้งหมด การตั้งค่าความกว้างเป็นค่าจำนวนเต็ม เช่น 1200 จะช่วยให้ตัวเลขในเส้นทางอ่านได้ง่ายขึ้น

โดยทั่วไปนี้คือค่าเส้นฐานแบบเริ่มต้นสำหรับองค์ประกอบ SVG ให้เพิ่ม display: block (หรือ vertical-align: bottom) เข้าไปในไฟล์ SVG เพื่อลบช่องว่างออก

ใช่ ให้สร้างเส้นแบ่งสองหรือสามเส้นในสีและความโปร่งใสที่แตกต่างกัน แล้ววางซ้อนกัน โดยปรับตำแหน่งของแต่ละเส้นออกไปประมาณไม่กี่พิกเซลผ่าน margin-top หรือ CSS transform เพื่อให้เกิดเอฟเฟกต์พาราลักซ์

ไฟล์ SVG ที่สร้างขึ้นมานั้นเป็นแบบคงที่ หากต้องการให้คลื่นเคลื่อนไหว ให้ใช้เฟรมกุญแจ CSS transform: translateX() กับองค์ประกอบห่อ (wrapper) หรือใช้ไฟล์สองชุดวางเคียงกันแล้วเลื่อนให้เคลื่อนไหว

ไม่มีการจัดเก็บข้อมูลใดๆ, ไฟล์ SVG จะถูกสร้างขึ้นใหม่ในแต่ละครั้งจากค่าของฟอร์มปัจจุบัน

เครื่องมือที่เกี่ยวข้อง

ตัวเลือกสี Material Design

สำรวจพาเลตสีของ Material Design คัดลอกเฉดสีใดก็ได้ (ตั้งแต่ 50 ถึง A700) ในรูปแบบ HEX, RGB หรือ HSL เพียงแตะครั้งเดียว

โปรแกรมแปลงรูปแบบภาพ

แปลงรูปภาพเป็น JPG, PNG หรือ WebP ได้ทันทีในเบราว์เซอร์ พร้อมควบคุมคุณภาพสำหรับรูปแบบบีบอัดและรักษาความโปร่งใสใน PNG และ WebP

เครื่องสร้างกระดาษเส้นบรรทัด

สร้างกระดาษเส้นบรรทัดพร้อมพิมพ์ได้ฟรี เลือกเส้นแบบวิทยาลัย กว้าง หรือแคบ ตั้งระยะห่างบรรทัดเป็นมิลลิเมตร ขนาดกระดาษ และเส้นขอบ แล้วพิมพ์หรือดาวน์โหลดเป็น SVG

เครื่องมือแบ่งกริดรูปภาพ Instagram

แบ่งรูปภาพขนาดใหญ่ให้เป็นกริด Instagram ขนาด 3×3 หรือกี่แถวก็ได้ แต่ละแผ่นภาพมีหมายเลขกำกับ จึงอัปโหลดแบบย้อนลำดับได้ง่าย

ตัวแปลง JPG เป็น Word

แปลงภาพถ่าย JPG หรือภาพหน้าจอของข้อความเป็นเอกสาร Word ที่แก้ไขได้ เครื่องมืออ่านคำด้วย OCR แล้วจัดวางเพื่อให้คุณเขียนใหม่ จัดรูปแบบ และนำกลับมาใช้ได้

เครื่องแปลงค่าจาก Pantone เป็น HEX

แปลงสี Pantone PMS ให้เป็นค่า HEX, RGB และ CMYK ที่ใกล้เคียงที่สุด เพื่อให้สอดคล้องกันระหว่างการแสดงผลบนหน้าจอและการพิมพ์ โดยพร้อมดูตัวอย่างสีแบบสวัตช์

เครื่องมือนี้มีให้บริการในภาษาอื่น