网站外链建设的八大基本准则,顺德网站开发招聘,重庆建设工程造价信息网站,小榄网站建设公司使用css来制作三角#xff0c;在日常用得较多。恰好这几天项目中有用到#xff0c;之前只是从网上copy下来代码直接用#xff0c;但是今天在用的时候遇到一些问题#xff0c;于是借此机会把这个css绘制三角好好研究下吧。 我们分别写一个div,s,span在日常用得较多。恰好这几天项目中有用到之前只是从网上copy下来代码直接用但是今天在用的时候遇到一些问题于是借此机会把这个css绘制三角好好研究下吧。 我们分别写一个div,s,span标签并给上下左右四个border赋值不同的颜色看看是什么样子 html div classtriangle/div ps classtriangle/sspan classtriangle/span/p css .triangle {width: 20px;height: 20px;border: 9px solid;border-color: blue red green yellow;
} 在chrome下如图 在IE下div构成的三角中的内容区比chrome要小。 如果我们把四个方向border的任意一边保留其余三个边的颜色设置成透明同时把设置height:0,width:0这样我们就能得到一个三角形咯我们先把所有边的颜色都保留看是什么样子的。 我们发现div这种块级元素在chrome下面可以完美的表现出4个三角但是IE下只能表现出上下的三角。其次内联元素表现出的样式在IE和chrome下面是一样的。于是这样就可能会出现一个问题。就是在写三角的时候我们写上下三角的时候在IE和chrome下面块级元素和内联元素都能展示出三角。但是你如果按照这种代码去写左右方向的三角的话在chrome下ok但是IE下面就会显示出体形来。这就会出现问题咯。这个问题也困扰了我当时我也想怎么同样的代码出来的三角就不一样呢原来方向不同在IE下的表现也不一样。好现在我们来让梯形变成三角形。只需要加上一段代码font-size:0就可以啦 修改css代码如下 .triangle {height: 0;width: 0;border: 9px solid;border-color: blue red green yellow;font-size: 0;
} 现在可以完美的兼容IE和chrome啦FF也不在话下哈哈。 好现在我们再设置其中三个边框的颜色为透明的看看会不会有三角出现哦就以右边的三角为例吧。 修改css代码如下 .triangle {height: 0;width: 0;border: 9px solid;border-color: transparent red transparent transparent;font-size: 0;
} 最终IE7/8/9和chrome下面都ok只是IE6下面不支持transparent而使用默认的背景色黑色如图所示 IE6下面如此的丑陋当然得解决掉你可以使用如下的方法 1. css hack 针对IE6的hack给上左下的三个border设置为白色但是这个情况只适用于背景色也为白色的情况 相应css代码 .triangle {height: 0;width: 0;border: 9px solid;border-color: transparent red transparent transparent;font-size: 0;_border-top-color: white;_border-left-color: white;_border-bottom-color: white;
} 2. border-style 这个方法更好设置要显示一边的三角border-style:solid其他三边为border-style:dashed这样利用虚线样式的border可以形成天然无污染的空白多好修改css代码如下 .triangle {height: 0;width: 0;border-width: 9px ;border-style: dashed solid dashed dashed; border-color: transparent red transparent transparent;font-size: 0;
} 这样IE6就可以兼容咯 参考资料 css border三角圆角生成技术简介 利用css制作小三角 转载于:https://www.cnblogs.com/hutaoer/archive/2012/11/09/2762475.html
