首页 网络技术
  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);}

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

本文标题:利用正方形的border参数画三角形
本文链接:https://www.qqooo.cn/post/610.htmlzblog
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 xsds@vip.qq.com 处理,谢谢!