下面是一些利用CSS中border的特性绘制的各种角度的三角形：
(1)正方形
图1：正方形
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
#triangle {
width : 0;
height: 0;
border-left: 50px solid gray;
border-right : 50px solid green;
border-bottom: 50px solid red;
border-top : 50px solid yellow;
}
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>如上图1，由于设置了width、height都为0了，所以四个点也就归并成了一个点，后面的各种角度的三角形，其实也就是不断调整那个中心点而已。
(2)向上三角
图2：向上三角
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
#triangle {
width : 0;
height: 0;
border-left: 50px solid transparent;
border-right : 50px solid transparent;
border-bottom: 100px solid red;
}
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>(3)向下三角
图3：向下三角
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
#triangle {
width : 0;
height: 0;
border-left: 50px solid transparent;
border-right : 50px solid transparent;
border-top: 100px solid red;
}
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>(4)向左三角
图4：向左三角
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
#triangle {
width : 0;
height: 0;
border-right: 100px solid red;
border-top : 50px solid transparent;
border-bottom: 50px solid transparent;
}
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>(5)向右三角
图5：向右三角
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
#triangle {
width : 0;
height: 0;
border-left: 100px solid red;
border-top : 50px solid transparent;
border-bottom: 50px solid transparent;
}
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>(6)左上三角
图6：左上三角
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
#triangle {
width : 0;
height: 0;
border-top : 100px solid red;
border-right: 100px solid transparent;
}
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html> (7)右上三角
图7：右上三角
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
#triangle {
width : 0;
height: 0;
border-top : 100px solid red;
border-left: 100px solid transparent;
}
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>(8)左下三角
图8：左下三角
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
#triangle {
width : 0;
height: 0;
border-bottom : 100px solid red;
border-right: 100px solid transparent;
}
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>(9)右下三角
图9：右下三角
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
#triangle {
width : 0;
height: 0;
border-bottom : 100px solid red;
border-left: 100px solid transparent;
}
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>