纯CSS制作三角形的方法

在前端设计中经常用到三角形图标，如列表、下拉提示、面包屑导航的位置，给用户以导向的引导作用。今天教大家几种纯CSS制作三角形的方法：

1、通过border 属性来实现

最简单也是最实用的方法,将元素的宽带和高度设为0，通过border属性来实现三角形。
优点：简单、可创建不同角度的三角形
缺点：IE6不支持transparent，可以通过chroma滤镜来解决、边会有锯齿
示例：

border via:  www.hujuntao.com

相关代码：

 
 
.angle i{
	position:absolute;
	z-index:0;
	border-style:solid;width:0;height:0;line-height:0; font-size:0;
}
.angle i.left{
	border-width:20px 20px 20px 0;border-color:transparent #33589F transparent transparent;
	_border-color:tomato #33589F tomato tomato; /*For IE6-*/ 
   _filter:chroma(color=tomato);/*For IE6-*/
   left:-20px;
   top:15px;
}
.angle i.right{
	border-width:20px 0 20px 20px;border-color:transparent  transparent  transparent #33589F;
	_border-color:tomato tomato tomato #33589F; /*For IE6-*/ 
   _filter:chroma(color=tomato);/*For IE6-*/
   right:-20px;
   top:15px;
}
.angle i.top{
	border-width:0 20px 20px 20px;border-color:transparent  transparent #33589F transparent;
	_border-color:tomato tomato #33589F tomato; /*For IE6-*/ 
   _filter:chroma(color=tomato);/*For IE6-*/
   left:100px;
   top:-20px;
}
.angle i.bottom{
	border-width:20px 20px 0 20px;border-color:#33589F transparent  transparent  transparent;
	_border-color:#33589F tomato tomato tomato ; /*For IE6-*/ 
   _filter:chroma(color=tomato);/*For IE6-*/
   left:100px;
   bottom:-20px;
}
<div class="angle">
<i class="top"></i>
<i class="right"></i>
<i class="bottom"></i>
<i class="left"></i>
border via: <a href="http://www.hujuntao.com">www.hujuntao.com</a>
</div>

2、transform来实现

通过旋转块状标签角度的方法获得,这种方法需要支持css3属性transform的浏览器支持.IE可以通过Matrix滤镜来实现。
缺点：不支持创建不同角度的三角形

示例：

transform via:  www.hujuntao.com

相关代码：

 
 
.angle b{
	position:absolute;
	z-index:0;
	width:50px;
	height:50px;
	background:#33589F;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	transform:rotate(45deg);
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=-0.70710678, M21=0.70710678, M22=0.70710678, sizingMethod='auto expand');
	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=-0.70710678, M21=0.70710678, M22=0.70710678,sizingMethod='auto expand')";
}
.angle b.left{
	top:15px;
	left:-10px;
}
.angle b.right{
	top:15px;
	right:-10px;
}
.angle b.top{
	top:-10px;
	left:100px;
}
.angle b.bottom{
	bottom:-10px;
	left:100px;
}
<div class="angle">
<b class="top"></b>
<b class="right"></b>
<b class="bottom"></b>
<b class="left"></b>
transform via: <a href="http://www.hujuntao.com">www.hujuntao.com</a>
</div>

3、字符来实现

通过◆字符实现.实现方法与上面的类似,将字符的颜色设置为和希望表现得容器相同的颜色,从而得到一个视觉上的三角形.只是这次我们没有用到CSS3的transform属性，兼容性更好一些。
缺点：不支持创建不同角度的三角形

示例：

◆◆◆◆◆ via:  www.hujuntao.com

相关代码：

 
 
.angle em{
	font-style:normal;
	color:#33589F;
	font-size:50px;
	width:0;
	height:0;
	line-height:50px;
	text-align:center;
	position:absolute;
	vertical-align:middle;
}
.angle em.left{
	top:15px;
	left:-25px;
}
.angle em.right{
	top:15px;
	right:25px;
	_right:-25px;
}
.angle em.top{
	top:-25px;
	left:100px;
}
.angle em.bottom{
	bottom:25px;
	_bottom:-25px;
	left:100px;
}
<div class="angle">
<em class="top">◆</em>
<em class="right">◆</em>
<em class="bottom">◆</em>
<em class="left">◆</em>
◆ via: <a href="http://www.hujuntao.com">www.hujuntao.com</a>
</div>

4、线性三角形的实现

我们可以通过border属性，将两个三角型的叠加就可以获得相应的效果：

示例：

border via:  www.hujuntao.com

相关代码：

 
 
.border em{
	position:absolute;
	z-index:0;
	border-style:solid;width:0;height:0;line-height:0; font-size:0;
}
.border em.left{
	border-width:20px 20px 20px 0;border-color:transparent #33589F transparent transparent;
	_border-color:tomato #33589F tomato tomato; /*For IE6-*/ 
   _filter:chroma(color=tomato);/*For IE6-*/
   left:-20px;
   top:15px;
}
.border em.left em{
	border-width:20px 20px 20px 0;border-color:transparent #FFF transparent transparent;
	_border-color:tomato #FFF tomato tomato; /*For IE6-*/ 
   _filter:chroma(color=tomato);/*For IE6-*/
   left:3px;
   top:-20px;
}
.border em.right{
	border-width:20px 0 20px 20px;border-color:transparent  transparent  transparent #33589F;
	_border-color:tomato tomato tomato #33589F; /*For IE6-*/ 
   _filter:chroma(color=tomato);/*For IE6-*/
   right:-20px;
   top:15px;
}
.border em.right em{
	border-width:20px 0 20px 20px;border-color:transparent  transparent  transparent #FFF;
	_border-color:tomato tomato tomato #FFF; /*For IE6-*/ 
   _filter:chroma(color=tomato);/*For IE6-*/
   right:3px;
   top:-20px;
}
.border em.top{
	border-width:0 20px 20px 20px;border-color:transparent  transparent #33589F transparent;
	_border-color:tomato tomato #33589F tomato; /*For IE6-*/ 
   _filter:chroma(color=tomato);/*For IE6-*/
   left:100px;
   top:-20px;
}
.border em.top em{
	border-width:0 20px 20px 20px;border-color:transparent  transparent #FFF transparent;
	_border-color:tomato tomato #FFF tomato; /*For IE6-*/ 
   _filter:chroma(color=tomato);/*For IE6-*/
   left:-20px;
   top:3px;
}
.border em.bottom{
	border-width:20px 20px 0 20px;border-color:#33589F transparent  transparent  transparent;
	_border-color:#33589F tomato tomato tomato ; /*For IE6-*/ 
   _filter:chroma(color=tomato);/*For IE6-*/
   left:100px;
   bottom:-20px;
}
.border em.bottom em{
	border-width:20px 20px 0 20px;border-color:#FFF transparent  transparent  transparent;
	_border-color:#FFF tomato tomato tomato ; /*For IE6-*/ 
   _filter:chroma(color=tomato);/*For IE6-*/
   left:-20px;
   bottom:3px;
}
<div class="border">
<em class="top"><em></em></em>
<em class="right"><em></em></em>
<em class="bottom"><em></em></em>
<em class="left"><em></em></em>
border via: <a href="http://www.hujuntao.com">www.hujuntao.com</a>
</div>

转自：http://www.hujuntao.com/archives/css-make-a-triangle.html