ตัวสร้างเส้นทางคลิป CSS

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

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

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

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