<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.triangle{
width:0;
height:0;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-bottom:30px solid red;
}
</style>
</head>
<body>
<div class="triangle">
</div>
</body>
</html>
其中:
border-left:控制的是三角形底边的左半边
border-right:控制的是三角形底边的右半边
border-bottom:控制的是三角形的高
.triangle{
width:0;
height:0;
border-right:60px solid transparent;
border-top:60px solid red;
}
更多见: http://www.zhihu.com/question/35180018