纯css3写三角(firefox下会有个坑,要改下写法)

看了下,差不多2个多月没写过东西了= =实在..好像也没碰到什么问题..加上人也有点怠惰了..
最近项目有个用css3写三角形的需求,然后突然发现三角形旋转之后会在firefox下会有条恶心的虚线...
正常的写法:
(原理比较简单,border组成的一个正方形,实际是由4个三角形组成,然后通过3个transparent和一个带颜色的border方位把一个正方形显示出只有一个三角形的样子)

border-color: transparent transparent transparent #20a0ff;
border-style: solid;
border-width: 50px;

tt.png

然后如果你需要这样一个三角形的时候

ttn.png

你就会在Firefox上惊奇的发现这条线....只要不旋转就没问题,但是一旋转就会有线

解决方法就是 通过border造一个长方形..来避免这条线的产生

border-color: transparent #20a0ff transparent transparent;
border-style: solid;
border-width: 0 65px 65px;
transform: rotate(360deg);//这里怎么转都可以,都不会出现虚线

这个是在Firefox上观察这个元素的图片,就可以发现:

ttf.png

成品:

tta.png