CSS三角形的一些应用

CSS三角形和圆角的盒子是我们前端开发中很不错的小技巧。以前我们都是用PNG的背景图片实现的，但是IE6的背景图片会有非透明的情况，这个处理起来会比较麻烦，会引用额外的代码，有的时候，CSS三角形及圆角的盒子是一个比较好的替代方法。

CSS三角形实现原理与分析：

参考文章《CSS Border使用小分享 》,是淘宝的乔花美女整理的，我这儿就没必要再说实现原理了，请看乔花写的文章。

关键代码分析

123456789101112131415161718192021222324252627282930313233343536

.triangle-l{ display:block;/*或者是display:inline-block;*/ height:0px; width:0px; border-color:transparent #69F transparent transparent; border-style:dashed solid dashed dashed; /*ie6 for dashed bug */ border-width:15px; overflow:hidden;/*ie6 for bug*/}.triangle-r{ display:block;/*或者是display:inline-block;*/ height:0px; width:0px; border-color:transparent transparent transparent #69F; border-style:dashed dashed dashed solid; /*ie6 for dashed bug */ border-width:15px; overflow:hidden;/*ie6 for bug*/}.triangle-t{ display:block;/*或者是display:inline-block;*/ height:0px; width:0px; border-color:#69F transparent transparent ; border-style:solid dashed dashed ; /*ie6 for dashed bug */ border-width:15px; overflow:hidden;/*ie6 for bug*/}.triangle-b{ display:block;/*或者是display:inline-block;*/ height:0px; width:0px; border-color:transparent transparent #69F; border-style:dashed dashed solid dashed; /*ie6 for dashed bug */ border-width:15px; overflow:hidden; /*ie6 for bug*/}

通过以上基本代码我们可以看出，我主要实现的是三角形四个方向的效果，主要通过CSS border的相关样式属性，再加上盒子的宽度和高度的特殊控制，就可以出现CSS三角形效果。

值得注意的是，IE6下是不尽人意的，有的时候要使用一些必杀技：

1. 三角形的标签元素，建议使用 <b></b>或<span></span> 标签，触发hasLayout 在IE6、IE7 下模拟inline-block 。

   (内联标签 + display:inline-block; + width) 就可以触发hasLayout 在IE6、IE7 下模拟inline-block 。原理是：display:inline-block可以触发hasLayout，width可以强行控制盒子大小，这样就模拟inline-block 。

2. IE6下, 设置余下三条边的border-style为dashed,即可达到边框透明的效果。
3. IE6下的空标签元素高度bug，也就是说height:0;不管用,用溢出隐藏（overflow:hidden;） 解决此问题。

CSS 三角形应用大观园：演示

我是MooTools的粉丝，当然也少不了，MooTools 和 CSS 三角形的综合应用了。

The HTML Code :

123456

<ul> <li>Triangles</li> <li>With Nothing</li> <li>But CSS</li> <li>Is pretty cool</li> </ul>

The CSS Code :

12345678910111213141516171819202122232425262728293031323334353637383940

ul,ol{list-style:none;} /*效果一的样式*/ li { position:relative; padding-left: 28px; font-size: 30px; cursor: pointer; _zoom:1; } li b { display:inline-block; position: absolute; top: 6px; left:0; height:0px; width: 0px; border-color:transparent transparent transparent #000; border-style:dashed dashed dashed solid; border-width:12px; overflow:hidden; } /*效果二的样式*/ /* li{ font-size: 30px; cursor: pointer; } li b{ display: inline-block; height:0px; width: 0px; border-color:transparent transparent transparent #000; border-style:dashed dashed dashed solid; border-width:10px; overflow:hidden; }*/

The MooTools JavaScript:

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081

<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js" type="text/javascript"></script> <script type="text/javascript"> /*效果一的JavaScript代码*/ document.addEvent('domready',function(){ //使用闭包函数，避免js 冲突 (function(){ var items = $$('li'); items.each(function(item){ var b = new Element('b').inject(item); b.set('morph',{ duration: 'short', transition: 'back:out' }); item.set('tween',{ duration: 'short' }); item.addEvents({ mouseenter: function(){ b.morph({ 'left': 8, 'border-left-color': '#1b60a6' }); item.tween('color','#1b60a6'); }, mouseleave: function(){ b.morph({ 'left': 0, 'border-left-color': '#000' }); item.tween('color','#000'); } }); }); })(); }); /*效果二的JavaScript代码*/ /* document.addEvent('domready',function(){ //使用闭包函数，避免js 冲突 (function(){ $$('li').each(function(item) { var paddingLeft = 'padding-left'; var b = new Element('b').inject(item,'top'); b.set('morph',{ duration: 'short', transition: 'back:out' }); item.set('tween',{ duration: 'short' }); item.addEvents({ mouseenter: function() { item.morph({ 'paddingLeft': 15 }); item.tween('color','#1b60a6'); b.morph({ 'border-left-color':'#1b60a6' }); }, mouseleave: function() { item.morph({ 'paddingLeft': 0 }); item.tween('color','#000'); b.morph({ 'border-left-color':'#000' }); } }); }); })(); }); */ </script>

演示