所有的三角形，都是通過盒子模型來設定。
border（邊框）的不同大小來決定
border-width: 邊框的寬度
border-style: 邊框的樣式
border-color: 邊框的顏色
1：2個顏色
<!DOCTYPE html>
<html>
<head>
<title>css的直角三角形</title>
<style type='text/css'>
.content-trigon-zhijiao {
width: 0px;
height: 0px;
border-color: red blue blue red;
border-width: 50px 50px 50px 50px;
border-style: solid;
}
</style>
</head>
<body>
<div class="title-trigon-zhijiao">css的直角三角形</div>
<div class="content-trigon-zhijiao">
<span><i></i></span>
</div>
</body>
</html>
2：
3：
4：
5：
6：
盒子模型：
可以參考：
以下是比較全面的css繪制的圖形：
https://css-tricks.com/examples/ShapesOfCSS/