纯CSS写三角形-border法[基础篇]
2014-08-07 21:12
134 查看
注意:所有知识点将不考虑IE6 ( ̄▽ ̄")
在制作如上图所示的三角形时,我们基本采用PNG或GIF图片来实现,这种形式在编写代码时较容易掌握,所以得到普遍制作者的认可。但涉及到后期优化维护的话,就需要不断的修改图片,在图形编辑器和代码编辑器之间来回切换,这无疑是加大了工作量。所以,如果单纯利用CSS来写的话,不但可以减少网站零碎图片的数量、减少了加载图片的时间,而且在修改时不用再重新切图,减少工作量。
CSS3出现以后,“方形旋转45度”制作三角形的方法固然炫酷,在兼容性上却差了点意思。所以这里要讲的是利用CSS2来写三角形,兼容所有浏览器(IE6)。
当然,任何方法都不会是十全十美的,在用CSS制作三角形时,必须存在一个甚至多个没有内容的空标签,例如<span></span>或<div></div>,如果有代码洁癖的人,请慎用~
主要用到的CSS属性是border(还不了解border用法的孩子们可以去w3c上学习下~)。
首先,写一个宽高都为0的空div样式:
效果如图:
我们要利用的正是border的这种边彼此叠加的性质来制作三角形,只要让其他三条边隐藏起来就可达到效果。
通过上面的原理,我们来制作一个指向下的三角形:
效果如图:
border-color:#c03 transparent transparent ;是将需要隐藏的边的颜色设置成透明;
border-width:30px 30px 0; 是将三角形对边的宽度设置为0(这里对边是border-bottom)。
这么做的原因是减小三角形有效作用区域。如果只改变颜色透明,而不改宽度会怎么样呢?
我们来给这个样式添加个阴影看下(这里建议用FF和CHROME浏览器查看效果)。
效果如图:
改变对边宽度为0后,
效果如图:
两种效果对比之下,虽然三角形看起来大小相同,但实际有效作用区域是不相同的。了解这一点,是为以后来写js的tip弹出层效果时做准备。
通过上面的内容,我们就可以开始写文章最开头引用效果图的样式了。
HTML:
CSS:
以上主要是border法写三角形的基础内容,后续会再整理一些“晋级”类的总结~_(:з)∠)_
在制作如上图所示的三角形时,我们基本采用PNG或GIF图片来实现,这种形式在编写代码时较容易掌握,所以得到普遍制作者的认可。但涉及到后期优化维护的话,就需要不断的修改图片,在图形编辑器和代码编辑器之间来回切换,这无疑是加大了工作量。所以,如果单纯利用CSS来写的话,不但可以减少网站零碎图片的数量、减少了加载图片的时间,而且在修改时不用再重新切图,减少工作量。
CSS3出现以后,“方形旋转45度”制作三角形的方法固然炫酷,在兼容性上却差了点意思。所以这里要讲的是利用CSS2来写三角形,兼容所有浏览器(IE6)。
当然,任何方法都不会是十全十美的,在用CSS制作三角形时,必须存在一个甚至多个没有内容的空标签,例如<span></span>或<div></div>,如果有代码洁癖的人,请慎用~
主要用到的CSS属性是border(还不了解border用法的孩子们可以去w3c上学习下~)。
首先,写一个宽高都为0的空div样式:
我们要利用的正是border的这种边彼此叠加的性质来制作三角形,只要让其他三条边隐藏起来就可达到效果。
通过上面的原理,我们来制作一个指向下的三角形:
border-color:#c03 transparent transparent ;是将需要隐藏的边的颜色设置成透明;
border-width:30px 30px 0; 是将三角形对边的宽度设置为0(这里对边是border-bottom)。
这么做的原因是减小三角形有效作用区域。如果只改变颜色透明,而不改宽度会怎么样呢?
我们来给这个样式添加个阴影看下(这里建议用FF和CHROME浏览器查看效果)。
改变对边宽度为0后,
两种效果对比之下,虽然三角形看起来大小相同,但实际有效作用区域是不相同的。了解这一点,是为以后来写js的tip弹出层效果时做准备。
通过上面的内容,我们就可以开始写文章最开头引用效果图的样式了。
HTML:
相关文章推荐
- 【转】纯CSS写三角形-border法[基础篇]
- 纯CSS写三角形-border法
- 如何使用纯CSS画出三角形之border法
- 【转】纯CSS写三角形-border法[晋级篇01]
- 纯CSS写三角形-border法
- 纯CSS写三角形-border法
- 纯CSS绘制三角形-border法
- 纯CSS写三角形-border法
- 纯CSS写三角形-border法
- 纯CSS写三角形-border法
- 纯CSS写三角形-border法
- 纯CSS写三角形-border法
- 纯CSS写三角形-border法
- 纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)
- 前端总结·基础篇·CSS(一)布局
- CSS制作三角形和按钮
- 浅谈纯CSS绘制圆形、椭圆形、菱形、三角形
- css---三角形的画法
- 纯css绘制三角形
- css写一个简单的三角形,绿色的哦