看了下,差不多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
