CSS tạo hình tam giác với css

Đôi khi design website chúng ta cần một chút hình tam giác nho nhỏ để làm trang trí cho một góc hình nào đó.
Bạn có thể tham khảo một số kiểu sau đây:

<style>
        .triangle-left {
                height:0px;
                border-top: 100px solid transparent;
                border-bottom: 100px solid transparent;
                border-left: 100px solid rgb(179, 137, 62);
        }
        .triangle-right {
                height:0px;
                border-top: 100px solid transparent;
                border-bottom: 100px solid transparent;
                border-right: 100px solid rgb(179, 137, 62);
        }
        .triangle-bottom {
                width:0px;
                border-right: 100px solid transparent;
                border-left: 100px solid transparent;
                border-bottom: 100px solid rgb(179, 137, 62);
        }
        .triangle-top {
                width:0px;
                border-right: 100px solid transparent;
                border-left: 100px solid transparent;
                border-top: 100px solid rgb(179, 137, 62);
        }
        .triangle-top-left {
                width:0px;
                border-right: 100px solid transparent;
                border-top: 100px solid rgb(179, 137, 62);
        }
        .triangle-bottom-left {
                width:0px;
                border-right: 100px solid transparent;
                border-bottom: 100px solid rgb(179, 137, 62);
        }
        .triangle-bottom-right {
                width:0px;
                border-left: 100px solid transparent;
                border-bottom: 100px solid rgb(179, 137, 62);
        }
        .triangle-top-right {
                width:0px;
                border-left: 100px solid transparent;
                border-top: 100px solid rgb(179, 137, 62);
        }
</style>
<div class='triangle-left'>triangle-left</div>
<div class='triangle-right'>triangle-right</div>
<div class='triangle-bottom'>triangle-bottom</div>
<br/>
<div class='triangle-top'>triangle-top</div>
<div class='triangle-top-left'>triangle-top-left</div>
<div class='triangle-bottom-left'>triangle-bottom-left</div>
<div class='triangle-bottom-right'>triangle-bottom-right</div>
<br/>
<div class='triangle-top-right'>triangle-bottom-right</div>

triangle-left

triangle-right

triangle-bottom

triangle-top

triangle-top-left

triangle-bottom-left

triangle-bottom-right

triangle-bottom-right

---

thaoj!