clip-path ด้วย polygon() และ circle()

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

จำกัดองค์ประกอบให้อยู่ในรูปวงกลม อาร์กิวเมนต์คือรัศมี:

จำกัดองค์ประกอบให้อยู่ในรูปวงรี โดยระบุรัศมีแกน x รัศมีแกน y และตำแหน่งจุดศูนย์กลางที่เป็นตัวเลือกเสริม:

clip-path ที่ทรงพลังที่สุด กำหนดรูปหลายเหลี่ยมด้วยการระบุคู่พิกัด x,y:

จำกัดองค์ประกอบให้อยู่ในรูปสี่เหลี่ยม พร้อมมุมโค้งที่เป็นตัวเลือกเสริม อาร์กิวเมนต์คือระยะ inset:

สร้างการเปลี่ยนผ่านแบบเอียงระหว่างส่วนต่าง ๆ ของหน้า:

clip-path ที่มีจำนวนจุดเท่ากันสามารถเปลี่ยนผ่านได้ เพื่อสร้างภาพเคลื่อนไหวแบบเปิดเผยและแปรรูป:

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

path() รับสตริงเส้นทาง SVG เพื่อสร้างรูปทรงใด ๆ:

clip-path จะสร้างบริบทการซ้อนใหม่ และอาจทำให้เบราว์เซอร์วาดภาพใหม่ในทุกเฟรมขณะทำภาพเคลื่อนไหว การทำให้ clip-path เคลื่อนไหวใช้ทรัพยากรมากกว่า transform หรือ opacity จึงควรใช้ร่วมกันอย่างระมัดระวัง

ระบบพิกัดสำหรับ clip-path คือกล่องเส้นขอบขององค์ประกอบ (หรือกล่องระยะขอบสำหรับ SVG) เปอร์เซ็นต์จะอ้างอิงตามขนาดขององค์ประกอบ

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