纯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;
}
border via: www.hujuntao.com

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;
}
transform via: www.hujuntao.com

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;
}
◆ via: www.hujuntao.com

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;
}
border via: www.hujuntao.com

“纯CSS制作三角形的方法”的5个回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注