CSS三角形的一些应用

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

css triangles

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

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

关键代码分析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.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 :

1
2
3
4
5
6
    <ul>
        <li>Triangles</li>
        <li>With Nothing</li>
        <li>But CSS</li>
        <li>Is pretty cool</li>
    </ul>

The CSS Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
	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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
    <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>

演示

站点统计