CSS Clip-Path Generator

Generate CSS clip-path shapes visually.

ประเภทรูปร่าง

รัศมี: 40%

จุดศูนย์กลาง X: 50%

จุดศูนย์กลาง Y: 50%

ตัวอย่างแบบเรียลไทม์

CSS ที่สร้าง

.element {
  clip-path: circle(40% at 50% 50%);
}

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

ตัวสร้าง CSS Clip-Path สร้างค่า clip-path สำหรับรูปร่างสี่ประเภท: circle(), ellipse(), inset() และ polygon()

สร้างเลย์เอาต์สร้างสรรค์ มาสก์รูปภาพ และรูปร่างส่วน hero โดยไม่ต้องใช้ไฟล์ SVG พารามิเตอร์ทั้งหมดอัปเดตตัวอย่างแบบเรียลไทม์

ส่วน hero ใช้ clip-path แนวทแยงหรือโค้งเป็นตัวแบ่งภาพ รูปโปรไฟล์ใช้ circle() เอฟเฟกต์ hover ใช้ animation clip-path

clip-path ส่งผลต่อพื้นที่คลิกได้หรือไม่? — ใช่ พื้นที่ที่ถูกตัดออกไม่สามารถคลิกได้
สามารถสร้าง animation ให้ clip-path ได้หรือไม่? — ได้ สามารถทำ transition ระหว่างรูปหลายเหลี่ยมสองรูปที่มีจำนวนจุดเท่ากัน
ทุกเบราว์เซอร์รองรับ clip-path หรือไม่? — ใช่ เบราว์เซอร์สมัยใหม่ทั้งหมดรองรับอย่างสมบูรณ์