ตัวสร้าง CSS Clip-path สำหรับรูปทรงและพรีวิวสด
ตัวสร้าง CSS clip-path สร้างค่าพร้อมคัดลอกสำหรับโพลิกอนรูปสามเหลี่ยม ห้าเหลี่ยม หกเหลี่ยม ดาว ลูกศร และสี่เหลี่ยมขนมเปียกปูน รวมถึงรูปทรง inset วงกลม และวงรี ปรับตัวเลือกที่มีได้ รวมถึงการปัดมุมของ inset (ถ้ามี) และตรวจสอบแต่ละรูปทรงในพรีวิวสดบนพื้นหลังไล่สี พรีวิวช่วยให้เข้าใจผลลัพธ์ที่ถูกคลิปก่อนคัดลอก CSS ไปใช้ในโปรเจกต์
ตัวสร้าง CSS clip-path สร้างค่า CSS สำหรับรูปทรงคลิปทั่วไปและแสดงผลลัพธ์แต่ละแบบในพรีวิวสด เลือกจากพรีเซ็ตโพลิกอนรูปสามเหลี่ยม ห้าเหลี่ยม หกเหลี่ยม ดาว ลูกศร และสี่เหลี่ยมขนมเปียกปูน หรือสร้างรูปทรง inset วงกลม หรือวงรี CSS ที่ได้พร้อมคัดลอกไปใช้ในโปรเจกต์
เครื่องมือจับคู่แต่ละรูปทรงที่เลือกกับค่า CSS clip-path ตัวเลือกโพลิกอนใช้รูปทรง polygon ส่วน inset วงกลม และวงรีสอดคล้องกับฟังก์ชันรูปทรงของ CSS ตัวเลือกที่มีให้ปรับแต่งรูปทรง รวมถึงการปัดมุมของ inset (ถ้ามี) พรีวิวพื้นหลังไล่สีช่วยให้ตรวจสอบพื้นที่ที่ถูกคลิปก่อนนำค่าที่สร้างไปใช้
ค่า CSS clip-path อธิบายว่าส่วนใดขององค์ประกอบยังคงมองเห็นได้โดยกำหนดรูปทรงคลิป พรีวิวสดช่วยให้เข้าใจผลลัพธ์ด้วยภาพ ส่วน CSS ที่คัดลอกให้ค่าที่นำไปใช้ในโค้ดได้ทันที มีประโยชน์เมื่อต้องการค่าตัวอย่างสำหรับการทดสอบ ต้องการหลายตัวเลือกพร้อมกัน หรืออยากตรวจสอบรูปทรงแทนการคิดค่าด้วยมือ
ตัวสร้างทำงานในเบราว์เซอร์ของคุณทั้งหมด ไม่มีการอัปโหลด จัดเก็บ หรือส่งข้อมูลไปยังเซิร์ฟเวอร์ และหลังจากโหลดหน้าแล้วก็ยังทำงานออฟไลน์ต่อได้ เหมาะสำหรับนักพัฒนาและนักออกแบบที่ต้องการตัวอย่าง clip-path อย่างรวดเร็ว รวมถึงวิศวกร DevOps ที่เตรียมข้อมูลทดสอบหรือฟิกซ์เจอร์
ขั้นตอนที่ 1: เลือกรูปทรง เช่น พรีเซ็ตโพลิกอน inset วงกลม หรือวงรี พรีเซ็ตโพลิกอน ได้แก่ สามเหลี่ยม ห้าเหลี่ยม หกเหลี่ยม ดาว ลูกศร และสี่เหลี่ยมขนมเปียกปูน
ขั้นตอนที่ 2: ตั้งค่าตัวเลือกสำหรับรูปทรงที่เลือก สำหรับรูปทรง inset ยังเลือกปัดมุมได้ (ถ้ามี)
ขั้นตอนที่ 3: ตรวจสอบพรีวิวสดบนพื้นหลังไล่สี เพื่อดูว่ารูปทรงคลิปเนื้อหาอย่างไร
ขั้นตอนที่ 4: คัดลอกค่า CSS clip-path ที่สร้างแล้วไปใช้ในโปรเจกต์ การทดสอบ ฟิกซ์เจอร์ หรือข้อมูลตั้งต้น
กรณีการใช้งาน: สร้างค่า CSS clip-path พร้อมใช้สำหรับการทดสอบ ฟิกซ์เจอร์ หรือข้อมูลตั้งต้น แทนการเขียนค่าทีละค่าด้วยมือ
กรณีการใช้งาน: สร้างค่า clip-path หลายค่าพร้อมกันเมื่อต้องการตัวอย่างรูปทรงหลายแบบสำหรับโปรเจกต์หรือชุดทดสอบ
กรณีการใช้งาน: รับค่าสุ่มที่เหมาะสมสำหรับข้อมูลตัวอย่างเมื่อการพิมพ์เดาด้วยมือไม่เหมาะเท่า
กรณีการใช้งาน: พรีวิวพรีเซ็ตโพลิกอน เช่น ดาวหรือลูกศร ก่อนคัดลอก CSS ลงหน้าเว็บ
กรณีการใช้งาน: เปรียบเทียบรูปทรง inset วงกลม และวงรีด้วยภาพ เพื่อตัดสินใจว่ารูปทรงคลิปแบบใดเหมาะกับการออกแบบ
กรณีการใช้งาน: เตรียมค่ารูปทรงพร้อมคัดลอกสำหรับต้นแบบ เพื่อลองตัวเลือกการคลิปหลายแบบโดยไม่ต้องประกอบค่าด้วยมือทีละค่า