利用正方形的border参数画三角形

.arrow{ width:0; height:0; border: 10px solid transparent; border-top-color: orange; position:absolute; content:‘‘; }

这种情况在火狐浏览器会出现比较恶心的对角线。

现在提供的方法是利用长方形的border画三角形，经过测试之后发现浏览器兼容良好。

div:after{width: 0; height: 0; border-color: transparent #70a1ee transparent transparent; border-style: solid; border-width: 0 12px 8px; position: absolute; top: 0px; right: -24px; content: ‘‘; transform: rotate(-180deg); -ms-transform: rotate(-180deg); -webkit-transform: rotate(-180deg);}

可以利用旋转画出各个角度的三角形。