css實現三角形的原理就是控制元素的border屬性，如果要顯示一個 向上的三角形，就不要border-top屬性，然後它的相反方向的border-bottom:要比平常的大一倍，具體看如下代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*上*/
.san {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #ff0066;
}
/* 下 */
.san_xia {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 20px solid red;
}
/* 右 */
.san_zuo {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 100px solid #333;
}
/* 左 */
.san_you {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid #0066ff;
border-bottom: 50px solid transparent;
}
</style>
</head>
<body>
<div class="san"></div>
<div class="san_xia"></div>
<div class="san_zuo"></div>
<div class="san_you"></div>
</body>
</html>