Đô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>
