เครื่องมือสร้าง clip-path สำหรับ CSS

ฟังก์ชันรูปร่างทั้งห้าชนิด

คลิปรูปหลายเหลี่ยมที่ใช้บ่อย

/* Hexagon */
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);

/* Rhombus */
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

/* Chevron / arrow pointing right */
clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%, 25% 50%);

/* Parallelogram */
clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);

/* Diagonal slice (modern hero section) */
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);

เส้นทแยงมุมของฮีโร่เซกชันน่าจะเป็นรูปแบบที่ใช้บ่อยที่สุด เพราะช่วยให้ส่วนนั้นดูทันสมัยด้วยมุมเฉียง โดยไม่ต้องพึ่งไฟล์ SVG เลย

การทำแอนิเมชันให้ clip-path

clip-path จะทำแอนิเมชันได้ตราบใดที่ทั้งสองสถานะใช้ฟังก์ชันรูปร่างเดียวกันและมีจำนวนจุดเท่ากัน รูปหลายเหลี่ยมที่มีจุดยอด 4 จุดจะเคลื่อนไหวไปยังรูปหลายเหลี่ยมอีกรูปที่มีจุดยอด 4 จุดได้อย่างลื่นไหล แต่การเพิ่มหรือลบจุดยอดจะทำให้การประมาณค่าระหว่างจุด (interpolation) เสียไป

.card { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.card:hover { clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%); }

ใช้เทคนิคนี้กับเอฟเฟกต์การปรากฏตัว การบิดเล็กน้อยเมื่อชี้เมาส์ หรือการเปลี่ยนหน้าเว็บ

clip-path เทียบกับ overflow: hidden

overflow: hidden จะตัดตามกรอบสี่เหลี่ยมของบอร์เดอร์บ็อกซ์ (ซึ่งทำให้มุมโค้งมนได้ด้วย border-radius) ส่วน clip-path จะตัดตามรูปร่างใดก็ได้ที่คุณกำหนด และตัด ทุกอย่าง รวมถึงเงาและเส้นขอบ หากคุณต้องการให้เงายังปรากฏอยู่นอกรูปร่าง clip-path ไม่ใช่ตัวเลือกที่เหมาะสม

filter: drop-shadow() สามารถเพิ่มเงาที่อิงตามรูปร่างให้กับองค์ประกอบที่ใช้ clip-path ได้ แต่ทำงานช้ากว่า

ประสิทธิภาพ

ในเบราว์เซอร์สมัยใหม่ clip-path ได้รับการเร่งความเร็วด้วย GPU แอนิเมชันของ clip-path จึงลื่นไหล ยกเว้น path() และรูปหลายเหลี่ยมที่ซับซ้อนมาก (จุดยอดมากกว่า 40 จุด) ซึ่งในบางเบราว์เซอร์จะถูกเรนเดอร์ด้วย CPU แทน

การเข้าถึง (Accessibility)

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

สำหรับปุ่มที่มีรูปทรงตัดแปลกตา ให้กำหนดความกว้างและความสูงขององค์ประกอบให้พอดี เพื่อให้พื้นที่คลิก (hitbox) ตรงกับพื้นที่ที่มองเห็นมากที่สุด