纯css实现三角形
浏览数：26 /
时间：2015年06月09日
在设计界面的时候，通常需要三角形的图标，一般做法是用图片，其实也可以使用css来实现。如下：
向上的三角形
向右的三角形
向下的三角形
向左的三角形
实现它们的css分别是：
1 .top{ 2 width: 0; 3 height: 0; 4 border-color: transparent transparent #333 transparent; 5 border-width: 6px; 6 border-style: solid; 7 }
1 .right { 2 width: 0; 3 height: 0; 4 border-color: transparent transparent transparent #333; 5 border-width: 6px; 6 border-style: solid; 7 }
1 .down { 2 width: 0; 3 height: 0; 4 border-color: #333 transparent transparent transparent; 5 border-width: 6px; 6 border-style: solid; 7 }
1 .left { 2 width: 0; 3 height: 0; 4 border-color: transparent #333 transparent transparent; 5 border-width: 6px; 6 border-style: solid; 7 }
其中用到的border-color：transparent是只有在奇葩的IE6下才不支持，所以可以放心使用
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
