当前位置:首页 > Web开发 > 正文

css三角形

2024-03-31 Web开发

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