使用css繪製三角形，主要利用了盒模型的border屬性，當盒子內容的寬度和高度遠小於盒子邊框的寬度時，邊框會顯示爲等腰梯形，由此，可以通過設置盒子寬度和高度爲0，再利用透明邊框來實現，代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0; padding:0;}
body{padding:30px;}
.san-1{width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; border-top:100px solid red;}
.san-2{margin-top:10px; width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:50px solid red; position:relative;}
.san-2 span{display:block; width:0; height:0; border-left:48px solid transparent; border-right:48px solid transparent; border-bottom:48px solid #FFF; position:absolute; top:1px; left:-48px;}
.box{margin-top:10px; width:10px; height:10px; border-top:50px solid red; border-right:50px solid yellow; border-bottom:50px solid blue; border-left:50px solid green;}
</style>
</head>
<body>
<!--三角形-->
<div class="san-1"></div>
<!--帶邊框的三角形-->
<div class="san-2">
<span></span>
</div>
<div class="box"></div>
</body>
</html>
參考鏈接