利用正方形的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);}

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

赞(0) 打赏
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《利用正方形的border参数画三角形》
文章链接:https://www.qqooo.cn/610.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。
本站资源均来源于网络,若侵犯您的权益,请来信 xsds@vip.qq.com 删除!

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏