CSS制作三角

web前端 杭州-小白 CSS制作三角

代码如下:

大概效果就是这样子的。

网上新浪微薄的也类似这样做的。

纯CSS利用字符

制作的。

我这里2种代码风格的.

一种margin,一种定位的.

经过各种测试发现。用新浪微薄的

这个字体,感觉很好很强大,

如果使用其他的字体,反正我测试的就是有毛病,可能会出现以下问题:

1.ie6,ie7边框粗了1像素.

2.谷歌浏览器看不出来三角边框了,变小了.

也许方法不对吧。。请指正….

对了上面方式一大家会觉得奇怪怎么还有相对定位呀。那个是解决IE6的margin 的bug的。这个不考虑IE6就不用加了。。。

【PS:其实网上对这个也有讲解.还有CSS3的方法【可以看这里】.】

2014-05-13 update 网上流行的一个展示三角形原理的一个GIF图

 

本文固定链接: http://www.xiaobai8.com/Blog/597.html | web前端,杭州小白的个人博客,小白的个人博客

该日志由 杭州-小白 于2012年09月13日发表在 CSS, css, 分享 分类下,
原创文章转载请注明: CSS制作三角 | web前端,杭州小白的个人博客,小白的个人博客
关键字: , ,

报歉!评论已关闭.