先将一个盒子的width和height都设置为0px，这一步是最关键的
画尖朝上的红色三角形
div{ ???width:0px; ???height:0px; ???border-left:100px solid #fff; ???border-right:100px solid #fff; ???border-top:100px solid #fff; ???border-bottom:100px solid #f00}画尖朝下的红色三角形
div{ ???width:0px; ???height:0px; ???border-left:100px solid #fff; ???border-right:100px solid #fff; ???border-bottom:100px solid #fff; ???border-top:100px solid #f00}画尖朝左的红色三角形
div{ ???width:0px; ???height:0px; ???border-left:100px solid #fff; ???border-top:100px solid #fff; ???border-bottom:100px solid #fff; ???border-right:100px solid #f00}画尖朝右的红色三角形
div{ ???width:0px; ???height:0px; ???border-right:100px solid #fff; ???border-top:100px solid #fff; ???border-bottom:100px solid #fff; ???border-left:100px solid #f00}画左上方的直角三角形
div{ ???width:0px; ???height:0px; ???border-top:100px solid #f00; ???border-right:100px solid #fff; ???border-bottom:100px solid #fff}CSS画三角形
原文地址：https://www.cnblogs.com/GouKu/p/10544519.html