สี & ดีไซน์

สร้าง CSS clip-path ลากจุดปรับรูปทรง สามเหลี่ยม ดาว ลูกศร

เลือกรูปทรงสำเร็จรูปแล้วลากจุดบนภาพเพื่อปรับ ได้โค้ด clip-path: polygon() พร้อมใช้ รองรับ circle ellipse และ inset ใช้ทำสามเหลี่ยม ลูกศร กรอบข้อความ หรือตัดภาพให้เป็นรูปทรงอิสระด้วย CSS ล้วน

ลากจุดสีขาวบนภาพเพื่อปรับรูปทรง · รูปทรง circle/ellipse/inset ใช้ค่าตายตัว ลากจุดไม่ได้


      

วิธีใช้

  1. เลือกรูปทรงสำเร็จรูป
  2. ลากจุดสีขาว เพิ่มหรือลบจุดตามต้องการ
  3. คัดลอกโค้ดไปใส่กับ element ที่ต้องการ

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

clip-path ต่างจาก border-radius อย่างไร?

border-radius ทำได้แค่มุมมน ส่วน clip-path ตัด element เป็นรูปทรงใดก็ได้ แต่เงา box-shadow จะถูกตัดไปด้วย

ต้องใส่ -webkit- ไหม?

เบราว์เซอร์สมัยใหม่รองรับแล้ว แต่ Safari เวอร์ชันเก่าอาจต้องใช้ -webkit-clip-path

เจอปัญหา? แจ้งเครื่องมือนี้