ตัวสร้างสามเหลี่ยม CSS
ปรับแต่งสามเหลี่ยมของคุณด้วยตัวเลือกด้านล่างและรับโค้ด CSS ที่สร้างขึ้นทันที
Controls
ตั้งค่าเป็น 0 สําหรับสามเหลี่ยมทึบ
Preview
CSS ที่สร้างขึ้น
$triangle-color: #165DFF; $triangle-size: 100px; .triangle { width: 0; height: 0; border-left: $triangle-size solid transparent; border-right: $triangle-size solid transparent; border-bottom: calc($triangle-size * 2) solid $triangle-color; }
คุณสมบัติอันทรงพลัง
ตัวสร้างสามเหลี่ยม CSS ของเรามาพร้อมกับคุณสมบัติมากมายที่จะช่วยคุณสร้างสามเหลี่ยมที่สมบูรณ์แบบสําหรับโครงการของคุณ
ควบคุมเต็มรูปแบบ
ปรับขนาด ทิศทาง สี และความกว้างของเส้นขอบเพื่อสร้างรูปสามเหลี่ยมที่สมบูรณ์แบบสําหรับการออกแบบของคุณ
คัดลอกลงคลิปบอร์ด
คัดลอกโค้ด CSS ที่สร้างขึ้นได้ทันทีด้วยการคลิกเพียงครั้งเดียวเพื่อการรวมเข้ากับโครงการของคุณอย่างง่ายดาย
การออกแบบที่ตอบสนอง
เครื่องกําเนิดไฟฟ้าทํางานได้อย่างสมบูรณ์แบบบนทุกอุปกรณ์ ตั้งแต่เดสก์ท็อปไปจนถึงมือถือ เพื่อให้มั่นใจว่าคุณสามารถสร้างสามเหลี่ยมได้ทุกที่
สามเหลี่ยมเคลื่อนไหว
เพิ่มการเคลื่อนไหวให้กับสามเหลี่ยมของคุณด้วยแอนิเมชั่นในตัว เช่น ชีพจร การเด้ง และการหมุน
บันทึกการกําหนดค่าสามเหลี่ยมของคุณและแบ่งปันกับสมาชิกในทีมหรือเพื่อน
หลายทิศทาง
สร้างสามเหลี่ยมที่ชี้ไปในทิศทางใดก็ได้ รวมถึงเส้นทแยงมุมด้วยการคลิกเพียงครั้งเดียว
ดูว่าสามเหลี่ยม CSS สามารถใช้ในสถานการณ์การออกแบบในโลกแห่งความเป็นจริงได้อย่างไร
ฟองคําพูด
สร้างอินเทอร์เฟซการแชทด้วยตัวชี้สามเหลี่ยมโดยใช้ CSS บริสุทธิ์
ปุ่มเล่น
ออกแบบเครื่องเล่นสื่อด้วยปุ่มเล่น/หยุดชั่วคราวที่มีสไตล์โดยใช้สามเหลี่ยม CSS
ลูกศรนําทาง
ใช้การควบคุมการนําทางด้วยลูกศรสามเหลี่ยมที่สะอาดตาและน้ําหนักเบา
ป้ายหรือการแจ้งเตือน
สร้างป้ายและการแจ้งเตือนที่ดึงดูดความสนใจด้วยสามเหลี่ยม CSS
รูปแบบเรขาคณิต
ออกแบบพื้นหลังและรูปแบบที่ซับซ้อนโดยใช้การผสมผสานของสามเหลี่ยม CSS
Tooltip
สร้างคําแนะนําเครื่องมือแบบโต้ตอบด้วยตัวชี้ที่มีสไตล์โดยใช้สามเหลี่ยม CSS
เกี่ยวกับ CSS Triangle Generator
ตัวสร้างสามเหลี่ยม CSS ของเราเป็นเครื่องมืออันทรงพลังที่ออกแบบมาสําหรับนักพัฒนาเว็บและนักออกแบบที่ต้องการสร้างสามเหลี่ยม CSS อย่างรวดเร็วและมีประสิทธิภาพ ไม่ว่าคุณจะสร้างคําแนะนําเครื่องมือง่ายๆ องค์ประกอบ UI ที่ซับซ้อน หรือเพียงแค่ทดลองกับ CSS ตัวสร้างของเราก็ช่วยคุณได้
ทําไมต้องใช้สามเหลี่ยม CSS?
- น้ําหนักเบา: ไม่ต้องใช้รูปภาพหรือทรัพยากรเพิ่มเติม
- ปรับขนาดได้: รักษาคุณภาพที่สมบูรณ์แบบในทุกขนาด
- ปรับแต่งได้: ควบคุมขนาด สี และทิศทางได้อย่างเต็มที่
- ประสิทธิภาพ: เวลาในการโหลดที่ดีขึ้นเมื่อเทียบกับโซลูชันที่ใช้รูปภาพ
- ตอบสนอง: ทํางานได้อย่างสมบูรณ์แบบในทุกอุปกรณ์
Related Tools
ตัวย่อขนาด CSS
บีบอัดและเพิ่มประสิทธิภาพโค้ด CSS ของคุณด้วยความแม่นยําระดับมืออาชีพ
Less to CSS Converter
แปลงโค้ด Less ของคุณเป็น CSS รวดเร็ว ง่ายดาย และปลอดภัย
สร้างการแปลง CSS3 ได้อย่างง่ายดาย
เครื่องมือที่ทรงพลังและใช้งานง่ายสําหรับการสร้างการแปลง CSS3 ที่ซับซ้อนโดยไม่ต้องเขียนโค้ด แสดงภาพการเปลี่ยนแปลงแบบเรียลไทม์และคัดลอก CSS ที่สร้างขึ้นเพื่อใช้ในโครงการของคุณ
ตัวแปลงตัวเลขดิจิตอล
แปลงระหว่างระบบเลขฐานสอง ทศนิยม เลขฐานสิบหก และฐานแปดอย่างแม่นยํา
Generate dummy text for your designs
สร้างข้อความตัวยึดตําแหน่งที่สมจริงสําหรับเว็บไซต์ แอป และเอกสารของคุณด้วยตัวสร้าง Lorem Ipsum ของเรา
HSV เป็น HEX
แปลงรหัสสี HSV เป็นค่า HEX สําหรับการออกแบบเว็บ