UTILS.
เป็นส่วนตัวตั้งแต่เริ่ม
▲

เครื่องมือสร้าง CSS Triangle

สร้างสามเหลี่ยมด้วย CSS ล้วนในทิศทางใดก็ได้และคัดลอก CSS

ไฟล์ของคุณอยู่ในอุปกรณ์นี้

ไฟล์ประมวลผลในเบราว์เซอร์และไม่ถูกอัปโหลด เว็บไซต์จะดาวน์โหลดโค้ดและทรัพยากรที่จำเป็นต่อเครื่องมือ ไม่ต้องมีบัญชีและไม่มีตัวติดตาม

ใช้ปุ่มดาวน์โหลดเพื่อบันทึกเครื่องมือนี้เป็นไฟล์ HTML ไฟล์เดียวสำหรับใช้ออฟไลน์

ความเป็นส่วนตัว →

เกี่ยวกับเครื่องมือนี้

สร้างสามเหลี่ยมด้วย CSS ล้วนโดยใช้เทคนิค border แบบคลาสสิก — เลือกทิศทาง ขนาด และสี แล้วคัดลอกกฎ พรีวิวอัปเดตแบบสดและทุกอย่างทำงานในเบราว์เซอร์ของคุณ

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

เทคนิค border ทำงานอย่างไร?
องค์ประกอบที่มีความกว้างและความสูงเป็นศูนย์จะแสดงเฉพาะเส้นขอบของมัน การทำให้เส้นขอบสามด้านโปร่งใสจะเหลือเส้นขอบที่มีสีหนึ่งด้านในรูปทรงสามเหลี่ยม
ทำไมจึงตั้งความกว้างและความสูงเป็น 0?
เมื่อไม่มีพื้นที่กล่อง เส้นขอบจะมาบรรจบกันที่จุดศูนย์กลาง ดังนั้นเส้นขอบที่มองเห็นเพียงด้านเดียวจึงกลายเป็นสามเหลี่ยมที่คมชัดแทนที่จะเป็นขอบหนา ๆ

เครื่องมือเพิ่มเติม