类似三角形的形状的元素在网页中可能会用到，我们可以用图片或者CSS元素达到我们想要的效果。这里讲一下是讲自己使用HTML+CSS实现三角形的方式。
为了能够熟悉的使用HTML+CSS构建三角形，我们首先要熟悉以下代码以及代码所实现的效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>shape</title>
<style type="text/css">
.shape{
height: 0;
0;
border-top: 100px solid red;
border-right: 100px solid blue;
border-bottom: 100px solid yellow;
border-left: 100px solid green;
}
</style>
</head>
<body>
<div class="shape"></div>
</body>
</html
这是一个HTML页面，我们定义一个class=shape的元素，为元素设置宽度和高度均为0，上下左右的border为100px并且用不同颜色填充，最终会有以下效果：
可以观察到，上下左右的border都占有45度直角三角形区域，底为100px+100px，高为100px。
如果我们希望实现如下图的三角形形状：
我们可以保留如下图中1或者2的位置：
我选择1区域，最终CSS如下:
.shape01{
height: 0;
0;
border-top: 100px solid transparent;
border-right: 100px solid blue;
}
其他情况类似。