UTILS.
ทำงานในเบราว์เซอร์ 100%

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

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

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

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

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

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

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