เครื่องมือสร้าง CSS clip-path
สร้าง CSS clip-path สำหรับตัดภาพและองค์ประกอบเว็บอย่างราบรื่นด้วยการลากและวาง รองรับการสร้างรูปหลายเหลี่ยม วงกลม วงรี พร้อมส่งออกเป็นโค้ด CSS ให้คุณนำไปใช้งานได้ทันที
ตัวแก้ไข
คลิกบนพื้นที่ว่างเพื่อเพิ่มจุดยอด ลากเพื่อย้าย คลิกขวาเพื่อลบจุด
ตั้งค่าการแสดงผล
แอนิเมชันเมื่อโฮเวอร์ (ทางเลือก)
หากเปิดใช้งาน เครื่องมือจะสร้างโค้ด CSS พร้อม property transition เมื่อนำเมาส์ไปชี้ หมายเหตุ: ในโหมดรูปหลายเหลี่ยม จำนวนจุดยอดของทั้ง 2 สถานะจะต้องเท่ากันเพื่อให้แอนิเมชันราบรื่น
คุณกำลังแก้ไขรูปทรงในสถานะเริ่มต้น สลับไปที่แท็บโฮเวอร์เพื่อตั้งค่ารูปทรงเมื่อนำเมาส์ไปชี้
โค้ดที่สร้าง
เกี่ยวกับเครื่องมือสร้าง CSS clip-path
เครื่องมือนี้เป็นผู้ช่วยชั้นดีที่จะช่วยให้คุณปรับแต่ง Property clip-path ใน CSS ได้อย่างง่ายดายด้วยการลากและวางเพียงไม่กี่ขั้นตอน
เมื่อก่อนเวลาต้องการตัดรูปภาพเป็นรูปทรงแปลกๆ จะต้องคำนวณพิกัดด้วยตัวเอง แต่ตอนนี้คุณสามารถวาดบนหน้าจอได้โดยตรงและคัดลอกโค้ด CSS ไปใช้ได้ทันที
ครอบคลุมรูปทรงเรขาคณิตพื้นฐานทั้งหมดและรองรับการสร้างแอนิเมชันโฮเวอร์ที่ราบรื่น
วิธีใช้งานอย่างรวดเร็ว
1️⃣ เลือกรูปทรง
เริ่มต้นด้วยการเลือกประเภทรูปทรงบนแถบเครื่องมือหรือเลือกจากพรีเซ็ตที่มีให้
2️⃣ ปรับจุดยอด
สำหรับรูปหลายเหลี่ยม ให้คลิกบนพื้นที่ว่างเพื่อเพิ่มจุด ลากเมาส์เพื่อย้าย และคลิกขวาเพื่อลบจุดนั้น
3️⃣ คัดลอกโค้ด
เมื่อปรับแต่งจนพอใจแล้ว ให้คลิกปุ่ม 'คัดลอก' เพื่อนำโค้ด CSS (หรือ Tailwind) ไปวางในโปรเจกต์ของคุณ
คู่มือ Property
ทำความรู้จักกับฟังก์ชันยอดนิยมของ clip-path:
■ polygon() — รูปหลายเหลี่ยม
clip-path: polygon(x1 y1, x2 y2, x3 y3, ...)
ให้คุณระบุพิกัดจุดได้มากเท่าที่คุณต้องการ แต่จำไว้ว่าต้องมีอย่างน้อย 3 จุดจึงจะเกิดรูปทรง
■ circle() — วงกลม
clip-path: circle(รัศมี at ศูนย์กลาง_X ศูนย์กลาง_Y)
เจาะเป็นรูปวงกลมโดยกำหนดรัศมีและจุดศูนย์กลางตามที่คุณต้องการ
■ ellipse() — วงรี
clip-path: ellipse(รัศมี_X รัศมี_Y at ศูนย์กลาง_X ศูนย์กลาง_Y)
คล้ายกับวงกลม แต่คุณสามารถปรับขยายความกว้างและความสูงได้อย่างอิสระ
■ inset() — กรอบด้านใน
clip-path: inset(บน ขวา ล่าง ซ้าย round ความโค้ง)
คล้ายกับการกำหนด Padding โดยการตัดจากขอบเข้ามาด้านใน รองรับการทำมุมโค้งด้วยคำว่า 'round'
คำถามที่พบบ่อย (FAQ)
- Q.clip-path ส่งผลต่อ SEO หรือไม่?
- ไม่ Property นี้เปลี่ยนแค่การแสดงผลบนหน้าจอเท่านั้น โครงสร้าง HTML และข้อความยังคงเหมือนเดิม Search Engine ยังสามารถอ่านและทำความเข้าใจเนื้อหาที่ถูกตัดได้ตามปกติ
- Q.CSS clip-path กับ SVG clipPath ต่างกันอย่างไร?
- CSS clip-path ใช้ฟังก์ชันที่มีอยู่ใน CSS ได้โดยตรง ในขณะที่ SVG clipPath ต้องกำหนดแท็ก SVG แล้วใช้ CSS อ้างอิงไปหา CSS นั้นใช้งานง่ายและรวดเร็วกว่า แต่ SVG เหมาะสำหรับรูปทรงที่มีความซับซ้อนสูงมาก
- Q.ฉันสามารถสร้างแอนิเมชันสำหรับ clip-path เมื่อโฮเวอร์ได้หรือไม่?
- ได้แน่นอน เพียงแค่ใช้ property transition ก็จะราบรื่น อย่างไรก็ตาม หากใช้รูปหลายเหลี่ยม (polygon) จำนวนจุดยอดก่อนและหลังการโฮเวอร์จะต้องเท่ากันทั้งหมด เอฟเฟกต์การเปลี่ยนผ่านจึงจะทำงานได้
- Q.พื้นที่ส่วนที่ถูกตัดออกไปแล้วสามารถคลิกได้หรือไม่?
- ไม่ได้ การดำเนินการด้วยเมาส์ทั้งหมด (คลิก, โฮเวอร์) ในพื้นที่ที่ถูกตัดออกไปจะถูกปิดใช้งาน ซึ่งช่วยป้องกันการคลิกผิดไปโดนพื้นที่โปร่งใส ทำให้ได้รับประสบการณ์การใช้งานที่แม่นยำยิ่งขึ้น
- Q.อัปโหลดรูปภาพในเครื่องมือนี้มีความเสี่ยงที่ข้อมูลจะรั่วไหลหรือไม่?
- คุณสามารถวางใจได้เลย การดำเนินการตัดต่อ แสดงผล และอัปโหลดรูปภาพทั้งหมดทำงานแบบ Local บนเบราว์เซอร์ของคุณ 100% จะไม่มีการส่งข้อมูลใดๆ ออกไปทั้งสิ้น
ตัวอย่างการใช้งาน
ตัดเฉียง Hero Section
สร้างความประทับใจทันทีที่ผู้ใช้เข้ามาในเว็บไซต์ โดยการตัดเฉียงรูปภาพพื้นหลังในส่วนหัว (Header)
รูปโปรไฟล์ที่ไม่เหมือนใคร
แทนที่จะใช้วงกลม 100% แบบเดิมๆ ลองตัดภาพอวาตาร์ของสมาชิกเป็นรูปหกเหลี่ยม รูปดาว หรือรูปทรงเรขาคณิตอื่นๆ ตามที่คุณต้องการ
แอนิเมชันเปิดเผย (Reveal)
เริ่มต้นด้วยรูปภาพที่ถูกตัดให้มีขนาดเล็ก และเมื่อนำเมาส์ไปชี้ ภาพจะขยายเต็มหน้าจอเพื่อสร้างความประหลาดใจให้กับผู้ชม
ส่งความคิดเห็น
โปรดแจ้งให้เราทราบความคิดเห็นของคุณเพื่อช่วยปรับปรุงเครื่องมือ
การส่งความคิดเห็นถูกระงับชั่วคราว
เซิร์ฟเวอร์ไม่ว่างหรือระบบป้องกันสแปมทำงานอยู่ โปรดลองอีกครั้งในภายหลัง