สร้าง clip-path

ทำงานอย่างไร

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

เปอร์เซ็นต์ ไม่ใช่พิกเซล

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

การคลิกเป็นไปตามรูปทรง

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

ทำแอนิเมชันระหว่างรูปทรง

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

บรรทัด -webkit-

เบราว์เซอร์ปัจจุบันต้องการเพียงพร็อพเพอร์ตีแบบไม่มีคำนำหน้า สำเนาแบบมีคำนำหน้าถูกรวมไว้เพราะ Safari บางรุ่นเก่ายังต้องการ และเก็บไว้ก็ไม่มีต้นทุน

สิ่งที่ไม่ทำ

ทำหน้าที่ตัด ไม่ได้จัดเลย์เอาต์ใหม่ ข้อความโดยรอบยังมององค์ประกอบเป็นสี่เหลี่ยมเดิม หากต้องการให้ข้อความไหลล้อมรอบรูปทรง ให้ใช้ shape-outside ซึ่งใช้ไวยากรณ์เดียวกัน