css三角形
1.网上比较通用的画利用正方形的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);}
可以利用旋转画出各个角度的三角形。
温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/43106.html