CSS border实现三角形
2015-06-16 20:27
661 查看
一、原理
CSS盒模型一个盒子包括:margin+border+padding+content。上下左右边框交界处出呈现平滑的斜线。利用这个特点,通过设置不同的上下左右边框宽度或者颜色可以得到小三角,小梯形等。 调整宽度大小可以调节三角形形状。
示例1:
一般情况下,我们设置盒子的宽高度及上下左右边框,会呈现如下图:
#test1 { height: 20px; width: 20px; border-color: #FF9600 #3366ff #12ad2a #f0eb7a; border-style: solid; border-width: 20px; }
示例2:
在上面基础上,我们把宽高度都设为0时,会呈现上述的边界斜线:
#test2 { height: 0; width: 0; overflow: hidden; /* 这里设置overflow, font-size, line-height */ font-size: 0; /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */ line-height: 0; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */ border-color: #FF9600 #3366ff #12ad2a #f0eb7a; border-style: solid; border-width: 20px; }
这时,其实我们已经看到有上下左右四个三角形了。如果4种颜色只保留一种颜色,余下3种颜色设置为透明(或者设置为和背景色相同的颜色),那不就出现一个小三角了吗?
示例3:
只保留上面的红色,如下图:
#test3 { height: 0; width: 0; overflow: hidden; font-size: 0; line-height: 0; border-color: #FF9600 transparent transparent transparent; border-style: solid; border-width: 20px; }
可是,IE6下不支持透明啊,会出现下图的样子:
找到一个在IE6下边框透明的文章中找到解决办法,如下例
示例4:
IE6下,设置余下三条边的border-style为dashed,即可达到透明的效果,具体原因可以见参考资料3:
#test4 { height: 0; width: 0; overflow: hidden; font-size: 0; line-height: 0; border-color: #FF9600 transparent transparent transparent; border-style: solid dashed dashed dashed; border-width: 20px; }
示例5:
上面我们画的小三角的斜边都是依靠原来盒子的边,还有另外一种形式的小三角,就是斜边在盒子的对角线上:
#test5 { height: 0; width: 0; overflow: hidden; font-size: 0; line-height: 0; border-color: #FF9600 #3366ff transparent transparent; border-style: solid solid dashed dashed; border-width: 40px 40px 0 0 ; }
保留其中一种颜色,就可以得到斜边在对角线上的三角形了。多个这样的三角形,通过设置边框大小、颜色,拼凑起来可以形成任意形状的三角形
像这种不规则的三角形,延伸一下,放在气泡框上,就可以省去拼背景图片的麻烦了:
另外,关于气泡框,可以使用棱形字符(◆)来实现,设置其font-size,颜色和背景色一致,定位可以使用margin负值和absolute绝对定位来实现。二、应用之圆角生成
应该说是近似圆角,其实由一个高度非常小的梯形展示出来。上梯形(无上边框,下左右3px宽度,左右颜色去掉)+矩形+下梯形。
自适应圆角1
整个rc设置为“float: left”或“display: inline-block”分为top、bd、bottom,top中又有两个层rc1和rc2,rc1只设置border-top,高度为0,并设置左 右margin呈短小的一横线,rc2只设置左右border并且左右margin小于rc1,height为1px,中间bd设置左右border,不 设置左右margin。 – 不过IE6&7出现bug:rc在IE6中依然显示为“dispaly: block”,而IE7中top和 bottom缩成一坨,不肯扩展开来,而在rc1/rc2/rc3中插入文字xxx后只能扩展到文字宽度,不能与bd对齐。自适应圆角2
自Google系产品的1px圆角按钮,共三层div,最外层div1正常设置边框宽度1px,呈现出上下边框线,中间div2只设置左右边框,且 把左右margin设置成负值,呈现出圆角处的4个圆点,内层div3同样只设置左右边框,同时margin上下空出div2的高度,margin左右也 设置与div2相同的负值。三、其他小问题
透明
IE6浏览器不支持transparent透明属性,就border生成三角技术而言,直接设置对应的透明边框的border-style属性为 dotted或是dashed即可解决这一问题,原因是在IE6下,点线与虚线均以边框宽度为基准,点线长度必须是其宽度的3倍以上 (height>=border-width*3),虚线宽长度必须是其宽度的5倍以上(height>=border-width*5), 否则点线和虚线都不会出现。IE6的奇偶bug
如果定位外框高度或是宽度为奇数,则IE6下,绝对定位元素的低定位和右定位会有1像素的误差.所以,尽量保证外框的高度或宽度为偶数值。IE6的空div高度bug
IE6下,空div会有莫名的高度,也就是说“height: 0;”不顶用,此时形成的尖角的实际占高于其他浏览器是有差异的。可使用“font-size: 0;”+“overflow: hidden;”修复此问题。filter: chroma滤镜
该属性属性可以设置一个对象中指定的颜色为透明色,如:border-color: pink;filter: chroma(color=pink);相关文章推荐
- 四个漂亮CSS样式表
- @import导入外部样式表与link链入外部样式表的区别
- 引入CSS文件的@import与link的权重分析
- css如何让表格或者行隔行显示背景颜色,单双交替显示不同的背景颜色
- 纯CSS绘制三角形
- HTML-CSS
- css+js 控制幻灯片效果
- CSS遮罩层,全兼容
- 伪元素改变date类型input框的默认样式实例页面
- CSS布局奇淫技巧之--各种居中
- CSS实现绝对定位居中
- CSS中如何实现未知尺寸图片垂直居中
- CSS背景100%平铺 浏览器缩小背景显示不全解决办法
- 封装好的友盟分享--默认的样式与自定义的样式
- 改变HTML中超链接的显示样式
- CSS学习1——基本布局以及盒子模型
- CSS Bugs 解决方案
- CSS(9)-float下篇
- CSS(8)-float上篇
- CSS(7)-盒子模型