Question 1

clip-path ใน CSS คืออะไร?

Accepted Answer

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

Question 2

เบราว์เซอร์ใดรองรับ clip-path?

Accepted Answer

เบราว์เซอร์สมัยใหม่ทุกตัวรองรับฟังก์ชันรูปทรงพื้นฐานที่ตัวนี้ใช้ ได้แก่ polygon(), circle(), ellipse() และ inset() ทั้ง Chrome, Edge, Firefox, Safari และ Opera ส่วนพรีฟิกซ์ -webkit-clip-path จำเป็นเฉพาะ Safari บนมือถือรุ่นเก่ามากเท่านั้น

Question 3

โหมด polygon ใช้งานอย่างไร?

Accepted Answer

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

Question 4

เปอร์เซ็นต์ใน polygon() หมายถึงอะไร?

Accepted Answer

จุดยอดแต่ละจุดเขียนเป็นคู่ X Y หน่วยเปอร์เซ็นต์ วัดจากมุมบนซ้ายขององค์ประกอบ เนื่องจากค่าสัมพัทธ์กับขนาดองค์ประกอบ รูปทรงจะย่อขยายตามและคงความรีสปอนซีฟทุกความกว้างหน้าจอ

Question 5

circle, ellipse และ inset ต่างกันอย่างไร?

Accepted Answer

circle(รัศมี at x y) ครอปเป็นวงกลมรัศมีเดียว, ellipse(rx ry at x y) กำหนดรัศมีแนวนอนแนวตั้งต่างกันได้ ส่วน inset(บน ขวา ล่าง ซ้าย) ครอปสี่เหลี่ยมที่หดเข้าจากทุกด้าน เครื่องมือนี้มีสไลเดอร์และช่องตัวเลขให้ครบทุกพารามิเตอร์

Question 6

clip-path กระทบเลย์เอาต์หรือการคลิกหรือไม่?

Accepted Answer

clip-path เป็นเพียงภาพ องค์ประกอบยังคงกล่องเดิมในเลย์เอาต์ สิ่งรอบ ๆ จึงไม่ขยับ แต่อีเวนต์พอยเตอร์อย่างการคลิกจะทำงานเฉพาะในบริเวณที่มองเห็นหลังครอป จึงเหมาะทำปุ่มทรงพิเศษ

Question 7

ทำแอนิเมชัน clip-path ได้ไหม?

Accepted Answer

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

Question 8

รูปภาพหรือข้อมูลของฉันถูกอัปโหลดไหม?

Accepted Answer

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

Question 9

clip-path นิยมใช้ทำอะไร?

Accepted Answer

การใช้งานยอดนิยม เช่น ส่วนฮีโร่เฉียง มาสก์อวตารหกเหลี่ยมหรือวงกลม หัวลูกศรแชทสามเหลี่ยม คอลลาจภาพเชิงสร้างสรรค์ มุมการ์ดตัดเฉียง และปุ่มทรงเฉพาะตัว ทั้งหมดนี้ไม่ต้องใช้โปรแกรมแต่งรูปเลย

ตัวสร้าง CSS Clip Path

วิธีใช้ ตัวสร้าง CSS Clip Path