สร้างรูปร่างอะไรได้?

รูปร่างทั่วไป: circle(), ellipse(), polygon(), inset() Polygon อนุญาตรูปร่างกำหนดเองด้วยจุดพิกัด

ใช้เปอร์เซ็นต์อย่างไร?

เปอร์เซ็นต์สัมพันธ์กับขนาด element 50% 50% คือกลาง ผสมกับหน่วยสัมบูรณ์สำหรับรูปร่างซับซ้อน

clip-path รองรับกว้างขวางไหม?

browsers สมัยใหม่รองรับ clip-path ดี ใช้ @supports สำหรับ fallbacks ใน browsers เก่า

เครื่องมือสร้าง CSS Clip-Path

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

รูปทรง

พรีเซ็ต

การควบคุม

รัศมี50%

ตำแหน่ง X50%

ตำแหน่ง Y50%

ดูตัวอย่าง

ดูตัวอย่างแบบเรียลไทม์ของรูปทรง CSS clip-path ของคุณ

โค้ด CSS ที่สร้างขึ้น

clip-path: circle(50% at 50% 50%);
-webkit-clip-path: circle(50% at 50% 50%);

เกี่ยวกับ

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

คุณสมบัติหลัก

• ตัวแก้ไขภาพแบบโต้ตอบพร้อมดูตัวอย่างแบบเรียลไทม์
• รองรับฟังก์ชันรูปทรง CSS clip-path ทั้งหมด
• คัดลอกโค้ด CSS ที่สร้างขึ้นได้ในคลิกเดียวพร้อม vendor prefix

การรองรับเบราว์เซอร์

คุณสมบัติ clip-path รองรับในเบราว์เซอร์สมัยใหม่ทั้งหมด เครื่องมือนี้รวม -webkit-clip-path prefix สำหรับความเข้ากันได้กับ Safari รุ่นเก่า

เคล็ดลับ

ใช้ -webkit-clip-path prefix ควบคู่กับ clip-path เพื่อความเข้ากันได้กับเบราว์เซอร์ที่ดีขึ้น โค้ด CSS ที่สร้างขึ้นรวมทั้งสองคุณสมบัติโดยอัตโนมัติ

Loading tool...