◇

เครื่องมือสร้าง CSS clip-path

ตัดองค์ประกอบให้เป็นรูปทรงทั่วไปแล้วคัดลอก CSS clip-path

ไฟล์ของคุณอยู่ในอุปกรณ์นี้

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

ใช้ปุ่มดาวน์โหลดเพื่อบันทึกเครื่องมือนี้เป็นไฟล์ HTML ไฟล์เดียวสำหรับใช้ออฟไลน์

ความเป็นส่วนตัว →

รูปทรง

ผลลัพธ์

ลองทำตามตัวอย่าง

ตัวอย่าง

เลือกรูปหกเหลี่ยมเพื่อให้ได้ clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); แต่ละคู่คือตำแหน่ง x และ y ภายในองค์ประกอบ รูปทรงจึงยืดตามความกว้างและความสูงขององค์ประกอบ

ข้อควรทราบ

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

เกี่ยวกับเครื่องมือนี้

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

คำถามที่พบบ่อย

clip-path แบบ polygon ทำงานอย่างไร?

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

เบราว์เซอร์ทุกตัวรองรับ clip-path ไหม?

รูปทรง polygon, circle, ellipse และ inset รองรับในเบราว์เซอร์รุ่นใหม่ทุกตัว ดังนั้น CSS ที่สร้างขึ้นจึงใช้งานได้โดยไม่ต้องใช้ prefix