เครื่องมือสร้าง CSS Clip-Path

CSS clip-path รองรับฟังก์ชัน polygon() ที่ประกอบด้วยคู่พิกัด x/y จำนวนเท่าใดก็ได้ นั่นหมายความว่ามันสามารถเซาะกล่องให้เป็นรูปร่างที่ไกลเกินกว่าสี่เหลี่ยมและวงกลมธรรมดาที่คนส่วนใหญ่ใช้ ข้อเสียคือการพิมพ์พิกัดเหล่านั้นด้วยมือเป็นเรื่องน่าเบื่อและแทบเป็นไปไม่ได้เลยที่จะทำให้ถูกต้องสำหรับสิ่งที่นอกเหนือจากสามเหลี่ยมพื้นฐาน เครื่องมือสร้างนี้เปลี่ยนรายการพิกัดนั้นให้เป็นชุดจุดที่ลากได้บนตัวอย่างสด ดังนั้นรูปร่างที่คุณเห็นจะเป็นรูปร่างที่ CSS สร้างออกมาเสมอ

ทุกจุดบนตัวอย่างจะถูกเก็บเป็นเปอร์เซ็นต์ของความกว้างและความสูงของกล่อง ซึ่งเป็นวิธีที่ clip-path: polygon() ทำงานภายในเช่นกัน รูปร่างที่สร้างด้วยวิธีนี้จะคงสัดส่วนที่ถูกต้องไม่ว่าองค์ประกอบจะมีขนาดเท่าใดในหน้าจริง ตั้งแต่หน้ากากไอคอนขนาดเล็กไปจนถึงแบนเนอร์ฮีโร่เต็มความกว้าง ลากจุดใดๆ เพื่อปรับโครงร่างใหม่ คลิกใกล้ขอบเพื่อเพิ่มจุดใหม่ตรงตำแหน่งที่คุณคลิก หรือดับเบิลคลิกจุดที่มีอยู่เพื่อลบออก — ตัวแก้ไขจะคงจุดไว้อย่างน้อยสามจุดเสมอ เนื่องจากโพลีกอนไม่สามารถมีจุดน้อยกว่านี้ได้

พรีเซ็ตหกแบบที่รวมมาได้รับการคัดเลือกเพื่อพิสูจน์ว่า clip-path สามารถทำได้มากกว่ารูปร่างนูน: ดาวและลูกศรอาศัยมุมกลับที่ชี้เข้าด้านใน ฟองคำพูดเซาะหางสามเหลี่ยมออกจากสี่เหลี่ยมธรรมดา และตั๋วที่มีรอยบากทำให้เกิดรอยเว้าสองรอยบนขอบตรงข้าม เหมือนตั๋วที่มีรูปรากฏจริง โหลดพรีเซ็ตใดๆ และลากต่อจากนั้น — ไม่มีอะไรในตัวแก้ไขที่ล็อกคุณไว้กับรูปร่างเริ่มต้น

อัปโหลดรูปภาพของคุณเองเพื่อดูตัวอย่าง clip-path กับเนื้อหาจริงแทนที่จะเป็นกล่องเปล่า หรือข้ามการอัปโหลดไปเลย ตัวอย่างจะเปลี่ยนเป็นลายทางเพื่อให้รูปร่างที่ถูกตัดยังคงมองเห็นได้ชัดเจนไม่ว่าจะด้วยวิธีใด เช่นเดียวกับทุกเครื่องมือบนเว็บไซต์นี้ ทุกอย่างทำงานภายในเบราว์เซอร์ของคุณเท่านั้น: ไม่มีรูปภาพใดออกจากอุปกรณ์ของคุณ และเครื่องมือสร้างยังคงทำงานแบบออฟไลน์ได้เมื่อโหลดหน้าเว็บแล้ว