ทรัพย์สินของ CSS cript Page คืออะไร?

คลิปเตอร์ กําหนดขอบเขตของธาตุที่สามารถมองเห็นได้ อะไรก็ตามที่อยู่นอกภูมิภาคจะถูกตัดออกไป มันรองรับรูปทรงพื้นฐานเช่น Pixma (), วงกลม, วงรี () และ inset () โดยจะให้คุณได้รูปหลายภาพที่ไม่ใช่รูปหลายเหลี่ยม.

ผมแก้ไขจุดรูปหลายเหลี่ยมด้วยมือได้ไหม?

ใช่ หลัง จาก เลือก ชุด ของ รูปหลายเหลี่ยม แล้ว ก็ ดู เหมือน ว่า แผง รับ เสียง ที่ ลาก ได้ ใน ภาพ. ลากพวกเขาเพื่อรีเซปรูปหลายเหลี่ยม และเพิ่มจุดพิกัดร้อยละ สดในซีเอสเอส.

ในเว็บเบราว์เซอร์ทั้งหมดได้รับการสนับสนุนทางคลิปไหม?

เวอร์ชันโมเดิร์นของโครเมี่ยม, เอดจ์, Firefox, และซาฟารี ล้วนรองรับการตัดต่อด้วยรูปร่างพื้นฐาน สําหรับเบราว์เซอร์ที่เก่าแล้ว คุณอาจต้องการตัวเลือก - webkit- นําหน้าหรือย้อนกลับ เนื่องจากเบราเซอร์ที่ไม่รองรับ จะเพียงแค่ละทิ้งกฏและแสดงองค์ประกอบที่สมบูรณ์.

ตัวเข้ารหัสแบบคลิป CSS

สร้างรูปแบบแถบ CSS โดยลากจุดหรือเลือกชุดสําเร็จรูป แล้วคัดลอกรูปหลายเหลี่ยม CSS.

Preset shapes

Show clipped-away area (dimmed)

Drag the points on the preview to reshape the polygon. Each point is an X/Y percentage.

Preview

CSS

Was this tool helpful?

Send output to:

How to use Clip Path Generator

คลิกรูปสําเร็จรูปเพื่อโหลดจุด หรือเลือกชุดภาพ, วงกลม, หรือวงรีสําหรับคลิปปัด.
ลาก จุด ต่าง ๆ ใน การ ดู ภาพ เพื่อ ทํา ให้ รูปหลายเหลี่ยม กลับ มา ใช้ ใหม่ หรือ ปรับ แถบ เลื่อน ให้ เป็น วง กลม และ โหมด ใน การ เรียง.
สลับการคลิก 'แสดงพื้นที่ตัดแล้ว' เพื่อแสดงตัวอย่างองค์ประกอบเต็ม จากนั้นคลิกที่สําเนา CSS เพื่อจับกฏการออกนอกเส้นทาง.

อะไรคือ?

เครื่องสร้างเส้นทาง Clip ให้คุณแกะสลักองค์ประกอบเป็นรูปทรงที่กําหนดเอง โดยใช้ CSS สมบัติ เลือกชุดสําเร็จรูปจาก 20+ เช่น สามเหลี่ยม, รูปหกเหลี่ยม, ลูกศร, ฟองข้อความ และอื่น ๆ -- จากนั้นค่อยลากจุดยอดรูปหลายเหลี่ยม ลงบนภาพสดโดยตรง เพื่อ จะ มี รูป ทรง กลม ให้ สลับ เข้า กับ อิน เซต, วง กลม, หรือ รูป วงรี ประกอบ และ ใช้ เครื่อง ขัด เงา เพื่อ ควบคุม รัศมี และ ตําแหน่ง. ทุกการเปลี่ยนแปลงอัพเดตภาพตัวอย่างและการสร้าง Public- Page CSS ทันทีและตัวเลือก dimmed ทับ แสดงให้เห็นว่าส่วนใดของธาตุจะถูกตัดออกไป ทุกอย่างอยู่ในเบราว์เซอร์ทั้งหมดของคุณ ดังนั้นงานของคุณไม่เคยออกจากอุปกรณ์ของคุณ คัดลอกผลลัพธ์ CSS และวางตรงเข้าไปในสไตล์ชีตของคุณ

Advertisement

`FAQ`

ทรัพย์สินของ CSS cript Page คืออะไร?: คลิปเตอร์ กําหนดขอบเขตของธาตุที่สามารถมองเห็นได้ อะไรก็ตามที่อยู่นอกภูมิภาคจะถูกตัดออกไป มันรองรับรูปทรงพื้นฐานเช่น Pixma (), วงกลม, วงรี () และ inset () โดยจะให้คุณได้รูปหลายภาพที่ไม่ใช่รูปหลายเหลี่ยม.
ผมแก้ไขจุดรูปหลายเหลี่ยมด้วยมือได้ไหม?: ใช่ หลัง จาก เลือก ชุด ของ รูปหลายเหลี่ยม แล้ว ก็ ดู เหมือน ว่า แผง รับ เสียง ที่ ลาก ได้ ใน ภาพ. ลากพวกเขาเพื่อรีเซปรูปหลายเหลี่ยม และเพิ่มจุดพิกัดร้อยละ สดในซีเอสเอส.
ในเว็บเบราว์เซอร์ทั้งหมดได้รับการสนับสนุนทางคลิปไหม?: เวอร์ชันโมเดิร์นของโครเมี่ยม, เอดจ์, Firefox, และซาฟารี ล้วนรองรับการตัดต่อด้วยรูปร่างพื้นฐาน สําหรับเบราว์เซอร์ที่เก่าแล้ว คุณอาจต้องการตัวเลือก - webkit- นําหน้าหรือย้อนกลับ เนื่องจากเบราเซอร์ที่ไม่รองรับ จะเพียงแค่ละทิ้งกฏและแสดงองค์ประกอบที่สมบูรณ์.

`Related tools`

`Author`

MWMarcus Webb"The DevTool Craftsman"
Full-Stack Developer & Tools Architect
Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 Clip Path Generator on Wikipedia·Developer Tools on Wikipedia·Clip Path Generator on Britannica

`People also use`

← Back to Developer Tools · All tags

Last updated: 2026-06-03