纯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