ตัวสร้าง CSS Clip-path
CSS Clip-path Generator สร้างค่า clip-path สำหรับรูปทรงยอดนิยม ได้แก่ สามเหลี่ยม ลูกศร ห้าเหลี่ยม หกเหลี่ยม ดาว chevron วงกลม วงรี และ inset มุมโค้ง พร้อมพรีวิวแบบเรียลไทม์
เกี่ยวกับเครื่องมือนี้
CSS Clip-path Generator สร้างค่า clip-path สำหรับรูปทรงยอดนิยม ได้แก่ สามเหลี่ยม ลูกศร ห้าเหลี่ยม หกเหลี่ยม ดาว chevron วงกลม วงรี และ inset มุมโค้ง พร้อมพรีวิวแบบเรียลไทม์
วิธีใช้
- เลือกรูปทรงจากรายการ
- เลือกสีสำหรับพรีวิว
- คลิก Copy CSS แล้วนำ clip-path ไปใช้กับ element หรือรูปภาพใดก็ได้
ข้อควรรู้
- clip-path จะซ่อนทุกส่วนที่อยู่นอกรูปทรง จึงไม่ต้องใช้ image mask หรือไฟล์ SVG
- polygon() รับรายการจุด x y เป็นเปอร์เซ็นต์ จึงปรับขนาดตาม element
- circle(50% at 50% 50%) ตัด element ให้เป็นวงกลมตรงกลาง
- inset() ที่มี round จะเพิ่มมุมโค้งให้การตัดแบบสี่เหลี่ยม
- basic shape ของ clip-path รองรับในเบราว์เซอร์หลักทุกตัวในปัจจุบัน
ทำงานในเบราว์เซอร์ของคุณทั้งหมด — ข้อมูลที่คุณป้อนจะไม่ถูกอัปโหลดหรือจัดเก็บ
คำถามที่พบบ่อย
ตัดรูปภาพเป็นรูปทรงด้วย CSS อย่างไร?
ใส่ clip-path ให้รูปภาพ เช่น clip-path: polygon(50% 0%, 0% 100%, 100% 100%); สำหรับรูปสามเหลี่ยม
clip-path กับ mask ต่างกันอย่างไร?
clip-path ตัดเป็นรูปทรงเวกเตอร์ขอบคม ส่วน mask ใช้รูปภาพหรือ gradient และสร้างขอบนุ่มที่โปร่งใสบางส่วนได้
ทำแอนิเมชันให้ clip-path ได้ไหม?
ได้ ถ้ารูปทรงทั้งสองใช้ฟังก์ชันเดียวกันและมีจำนวนจุดเท่ากัน เบราว์เซอร์จะทำ transition ระหว่างกันได้
clip-path มีผลกับการคลิกไหม?
มี พื้นที่นอกรูปทรงที่ถูกตัดจะไม่ถูกแสดงผลและไม่รับ pointer event