เรียกดูเครื่องมือ

เครื่องมือสร้างเส้นทางคลิป CSS

สร้างรูปหลายเหลี่ยมและจัดรูปร่างคลิปพาธด้วยการแสดงตัวอย่างแบบโต้ตอบ เหมาะสำหรับรูปร่างฮีโร่และมาสก์รูปภาพ

CSS Clip Path Generator

Live

Shape

CSS output

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

Key capabilities

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

วิธีใช้

เลือกรูปร่างหรือจุดรูปหลายเหลี่ยมที่กำหนดไว้ล่วงหน้า
ปรับจุดตามต้องการ
คัดลอก CSS เส้นทางคลิป

How this tool works

เลือกรูปร่างหรือจุดรูปหลายเหลี่ยมที่กำหนดไว้ล่วงหน้า
ปรับจุดตามต้องการ
คัดลอก CSS เส้นทางคลิป

Recommended settings

ใช้ตัวเลือกเริ่มต้นก่อน จากนั้นจึงปรับเปลี่ยนหากจำเป็น

Supported formats

Text / on-page input

File size and limits

การดูตัวอย่างหลายเลเยอร์ที่ซับซ้อนมากอาจรู้สึกช้าลงในโทรศัพท์รุ่นเก่า

Privacy

ตัวสร้างสีและ CSS ทำงานทั้งหมดในเบราว์เซอร์ของคุณ การดูตัวอย่างและการแปลงไม่เคยอัปโหลดสไตล์ของคุณ

Common use cases

ใช้ CSS Clip Path Generator ทุกครั้งที่คุณต้องการ: สร้างรูปหลายเหลี่ยมและจัดรูปร่างคลิปพาธด้วยการแสดงตัวอย่างแบบโต้ตอบ

Troubleshooting

การแสดงตัวอย่างดูแตกต่างออกไปหลังจากวาง

ตรวจสอบ CSS ที่แข่งขันกันบนเพจของคุณ (รีเซ็ต, สีที่สืบทอดมา) คัดลอกกฎที่สร้างขึ้นลงในสไตล์ชีตแบบแยกก่อน

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

สิ่งนี้อัปโหลด CSS ของฉันหรือไม่

ไม่ ตัวสร้างและตัวแปลงทำงานในเบราว์เซอร์ของคุณพร้อมการแสดงตัวอย่างแบบสด

ฉันจำเป็นต้องมีบัญชีหรือไม่?

ไม่ เปิดเครื่องมือ ปรับแต่งการควบคุม และคัดลอก CSS

เครื่องมือที่เกี่ยวข้อง

CSS Triangle Generator

Generate CSS triangles with border tricks — direction, size, and color.

Border Radius Generator

Control each corner independently and preview rounded shapes with copy-ready CSS.

CSS Gradient Generator

Build linear, radial, and conic gradients with live preview and copy-ready CSS.