<div class="triangle"></div>

.triangle {
    width: 100px;
    height: 100px;
    border: 1px solid black; /* ใส่เส้นขอบแบบทึบสีดำขนาด 1px */
}

ต่อมา
เมื่อเส้นขอบมีขนาดใหญ่มากๆ เราจะเห็นว่าการประกอบเส้นขอบทั้ง 4 ด้านเข้าด้วยกันนั้น คล้ายกับวงกบของประตู

.triangle {
    width: 100px;
    height: 100px;
    border-top: 100px solid blue; /* ขอบบนสีน้ำเงิน ขนาด 100px */
    border-right: 100px solid red; /* ขอบขวาสีแดง ขนาด 100px */
    border-bottom: 100px solid yellow; /* ขอบล่างสีเหลือง ขนาด 100px */
    border-left: 100px solid green; /* ขอบซ้ายสีเขียว ขนาด 100px */
}

ต่อมา
กำหนดขนาดของกล่องสี่เหลี่ยมให้มีความกว้าง และความสูงเป็น 0px ก่อน
เราก็จะได้สามเหลี่ยม 4 อัน ชี้เข้าหากัน หากเราต้องการปรับความแหลมของสามเหลี่ยม เราก็สามารถไปปรับที่ขนาดของ border ได้

.triangle {
 width: 0px; /* กำหนดให้ width เป็น 0px */
 height: 0px; /* กำหนดให้ height เป็น 0px */
 border-top: 100px solid blue;
 border-right: 100px solid red;
 border-bottom: 100px solid yellow;
 border-left: 100px solid green;
}

ต่อมา
จะเห็นว่ารูปสามเหลี่ยมด้านบน-ล่าง นั้นแหลมขึ้น ส่วนรูปสามเหลี่ยมด้านซ้าย-ขวานั้นทู่ลง ในขั้นตอนสุดท้าย เราจะต้องซ่อน border ด้านที่เราไม่ต้องการไว้ จะได้มองเห็นเป็นรูปสามเหลี่ยมเพียงอันเดียว ให้เรากำหนดสีของ border ด้านที่เราจะซ่อนให้เป็น transparent(โปร่งใส) เราก็จะได้รูปสามเหลี่ยมตามที่ต้องการ

.triangle {
 width: 0px;
 height: 0px;
 border-top: 100px solid blue;
 border-right: 50px solid red; /* ลดขนาดขอบขวาเหลือแค่ 50px */
 border-bottom: 100px solid yellow;
 border-left: 50px solid green; /* ลดขนาดขอบซ้ายเหลือแค่ 50px */
}

อ่านเพิ่ม
http://www.siamhtml.com/how-to-create-triangle-shapes-with-css-border/