ตัวสร้างสามเหลี่ยม 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
สร้างเลย์เอาต์ Flexbox ที่สมบูรณ์แบบ
แสดงภาพ ปรับแต่ง และสร้างโค้ดเฟล็กซ์บ็อกซ์ CSS ด้วยอินเทอร์เฟซแบบลากและวางที่ใช้งานง่ายของเรา
ตัวแปลงสไตลัสเป็น CSS
แปลงโค้ด SCSS ของคุณเป็น CSS รวดเร็ว ง่ายดาย และปลอดภัย
ตัวแปลง SCSS เป็น CSS
แปลงโค้ด SCSS ของคุณเป็น CSS รวดเร็ว ง่ายดาย และปลอดภัย
ตัวแปลงหน่วยอุณหภูมิ
แปลงระหว่างหน่วยอุณหภูมิต่างๆ ด้วยความแม่นยําสําหรับความต้องการทางวิทยาศาสตร์และในชีวิตประจําวันของคุณ
แปลงมุมด้วยความแม่นยํา
แปลงระหว่างหน่วยมุมต่างๆ ได้อย่างง่ายดายด้วยเครื่องมือแปลงที่ใช้งานง่ายของเรา เหมาะสําหรับวิศวกร นักเรียน และมืออาชีพ
CMYK เป็น HSV
แปลงค่าสี CMYK เป็นแบบจําลองสี HSV สําหรับการใช้งานดิจิทัล