<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{margin:0;padding: 0;}
div{margin:10px;}
.b0{height:100px;
width:100px;
border-top:solid 50px red;
border-left:solid 50px yellow;
border-right:solid 50px green;
border-bottom:solid 50px blue;
}
.b1{height:0px;
width:0px;
border-top:solid 50px red;
border-left:solid 50px yellow;
border-right:solid 50px green;
border-bottom:solid 50px blue;
}
.b2{height:0px;
width:0px;
border-top:solid 50px red;
border-right:solid 50px green;
}
.b3{height:0px;
width:0px;
border-top:solid 50px red;
border-right:solid 50px rgba(0,0,0,0);
}
.b4{height:0px;
width:0px;
border-top:solid 30px red;
border-right:solid 40px rgba(0,0,0,0);
}
.b5{height:0px;
width:0px;
border-top:solid 50px red;
border-left:solid 50px rgba(0,0,0,0);
border-right:solid 50px rgba(0,0,0,0);
}
</style>
</head>
<body>
<div class="b0"></div>
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="b4"></div>
<div class="b5"></div>
</body>
</html>
![border triangle效果图]( "border triangle效果图")
