用border属性实现三角形（上下左右，直角）
原理：
1. 创建一个有宽高的盒子，同时自定义 四条边框的宽度，给上下左右border加上不同颜色,可以看到边框与边框的连接是一条斜线
<div class="trangle">div>
.trangle{ width: 100px; height: 100px; border-style:solid; border-width:100px 100px 100px 100px; border-color: red yellow blue black; }
效果图如下：
2. 如果不设置宽
.trangle{ width: 0; /*不设置宽*/ height: 0; border-style:solid; border-width:100px 100px 100px 100px; border-color: red yellow blue black; }
效果图如下：
不设置高
.trangle{ width: 0; height: 0;/*不设置高*/ border-style:solid; border-width:100px 100px 100px 100px; border-color: red yellow blue black; }
效果图如下：
四种三角形全出来了，三角形的高度由border-width决定
3. 最后，想要哪个角，把其余三个border设为透明就可以啦。
以 向上的三角形 为例：
3.1. 继续把上边框border-top-width（红色部分）设置成0
.trangle{ width: 0; height: 0; border-style:solid; border-width:0 100px 100px 100px;/*把上边框border-top-width设置成0*/ border-color: red yellow blue black; }
效果图如下：
为什么设置成0 直接变成透明色不行吗？ 可以的，但上边框会占据空间，设置成 0 后上边框就不占据空间了。
3.2. 这时要想得到三角形（蓝色部分），只需要再将左右边框（黑黄部分）设置成透明色即可
.div1{ width: 0px; height: 0px; border-style:solid; border-width:0px 100px 100px 100px;/*border-top-width设置为0,为了让透明的顶部的三角形不占据空间*/ border-color: transparent transparent blue transparent; }
这里为什么设置成透明色 而不是设置成0呢？因为三角形的底是由左右边框（border-left-width + border-right-width）共同来决定的
如果要做成一个直角三角形，将一边的宽度设置为0即可
附代码：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用border属性实现三角形（上下左右，直角）title>
<style type="text/css">
.div1{
width: 0px;
height: 0px;
border-style:solid;
border-width:0px 100px 100px 100px;/*border-top-width设置为0,为了让透明的顶部的三角形不占据空间*/
border-color: transparent transparent blue transparent;
}
.div2{
width: 0px;
height: 0px;
border-style:solid;
border-width:100px 100px 0px 100px;
border-color: red transparent transparent transparent;
}
.div3{
width: 0px;
height: 0px;
border-style:solid;
border-width:100px 100px 100px 0px;
border-color: transparent yellow transparent transparent;
}
.div4{
width: 0px;
height: 0px;
border-style:solid;
border-width:100px 0px 100px 100px;
border-color: transparent transparent transparent black;
}
.div5{
width: 0px;
height: 0px;
border-style:solid;
border-width:0px 0 100px 100px; /*三角形的底等于相邻两边的两个三角形宽度相加，要做一个直角三角形，将一边的宽度设置为0即可*/
border-color: transparent transparent blue transparent;
}
style>
head>
<body>
<div class="div1">div>
<div class="div2">div>
<div class="div3">div>
<div class="div4">div>
<div class="div5">div>
body>
html>