先将一个盒子的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}