纯CSS三角 可兼容各主流浏览器

作者:norion时间:2012年6月9日评论次数:0 条

在印象中,纯CSS也可以写三角写圆角,这两天遇到一个项目,本来可以用图片来写的,虽然项目很赶,但是还是决定用css来写看看,多久了没拿出来练练,手开始贱了。

本来我是想用css的border属性来写,结果效果还是跟实际的要求还是有点差别,看了相关的文章,好像有点兼容的小问题,具体怎么样没有详细研究。

用border属性来写css三角是这样的:

.more{
display:inline-block;
zoom:1;
width:0;
height:0;
overflow:hidden;
line-height:0;
font-size:0;
border-width:4px 4px 0;
border-style:solid;
border-right-color:transparent;
border-left-color:transparent;
border-bottom-color:transparent;
_border-style:solid dotted dotted dotted;
vertical-align:top;
color:#000
}

这样写就可以实现css三角,但是颜色上比较不好控制,放大了之后好像有点毛边的感觉,效果不够锐化,于是我就按照这种思路从新试着写了一个。

首先,将html里面添加几个标签:

<span class="more"><em class="b1"></em><em class="b2"></em><em class="b3"></em></span>

然后,将span设置一个宽度,超过就截掉,而后给每个em设置一个宽度,用margin来控制位置,这样效果就出来了,我是这样写的:

.more{margin:6px 0 0 3px;width:5px;height:3px;overflow:hidden;line-height:0;font-size:0;vertical-align:middle;display:inline-block;}
.more em{background:#C1C1C1;margin:0 auto;height:1px;overflow:hidden;line-height:0;font-size:0;display:block;}
.more .b1{width:5px}
.more .b2{width:3px}
.more .b3{width:1px}

其实,CSS圆角也是可以用这样的思路去写,但是我更趋向于用CSS3,那玩意多么美妙,虽然现在还有很多浏览器都不支持CSS3,但是像火狐、Chrome、Opera还有现在很主流的一些手机浏览器都开始对CSS3支持,未来的前景将更好,前端就有更多的时间研究其他东西了。

标签:

上一篇: tabs选项卡jQuery插件 v1.1

下一篇:jQuery展示限时广告后自动消失

相关文章

评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注