CSS画各种图型(1) —— 纯CSS画三角型

全分享发表于
2014-09-01
(6586)

本篇主要采用的是CSS2，所以是支持所有的主流浏览器，基本每一个场合都能用得上，废话不多放，入题

基本原理：

用CSS来画角型，更确切的说是用 border来画的，最好是设置为块状元素（个人意见）,将其宽度高度设置为0，然后利用四个边框来制作CSS，基本样式如下

CSS:

.bslqTriangular{
width: 0;
height:0;
line-height:0;
overflow:hidden;
border-width:60px;
border-style:solid;
border-color:red yellow black green;/*红 黄 黑 绿*/
}

看到这里就基本明白了吧，下面来制作几个常用的图标，主要是方便平时使用（每次都写一次不是要烦死个先人哟），其实这里再加点圆角效果，就直接变成饼状图了,这个在下一张CSS画各种图型(2) —— css3画多种图形

向上的箭头

CSS:

.bslqTriangularTop{
width: 0;
height:0;
line-height:0;
overflow:hidden;
border-width:0px 60px 60px 60px;
border-style:solid;
border-color:transparent transparent  black transparent ;/*透明 透明 黑 透明 */
}

向右的箭头

CSS:

.bslqTriangularRight{
width: 0;
height:0;
line-height:0;
overflow:hidden;
border-width:60px 0px 60px 60px;
border-style:solid;
border-color:transparent transparent transparent green;/*透明  透明 透明 绿*/
}

向下的箭头

CSS:

.bslqTriangularBottom{
width: 0;
height:0;
line-height:0;
overflow:hidden;
border-width:60px 60px 0 60px;
border-style:solid;
border-color:red transparent transparent ;/*红 透明 透明 透明 */
}

向左的箭头

CSS:

.bslqTriangularLeft{
width: 0;
height:0;
line-height:0;
overflow:hidden;
border-width:60px 60px 60px 0px;
border-style:solid;
border-color:transparent yellow transparent transparent;/*透明 黄  透明 透明*/
}

左上的箭头

CSS:

.bslqTriangularTopLeft{
width: 0;
height:0;
line-height:0;
overflow:hidden;
border-width:0px 0px 60px 60px;
border-style:solid;
border-color:transparent transparent transparent green;
}

右上的箭头

CSS:

.bslqTriangularTopRight{
width: 0;
height:0;
line-height:0;
overflow:hidden;
border-width:0px 60px 60px 0px;
border-style:solid;
border-color:transparent green transparent transparent;
}

右下的箭头

CSS:

.bslqTriangularbottomRight{
width: 0;
height:0;
line-height:0;
overflow:hidden;
border-width:0px 0px 60px 60px;
border-style:solid;
border-color:transparent transparent green transparent;
}

左下的箭头

CSS:

.bslqTriangularbottomLeft{
width: 0;
height:0;
line-height:0;
overflow:hidden;
border-width:0px 60px 60px 0px;
border-style:solid;
border-color:transparent transparent green transparent;
}

三角型的高度，宽度，大小都通过border来配合,当然，在这上面的几个例子中，如果把四全部的四边高度都设置为60px也是一样的效果

个人习惯把不用的边框就直接去掉，这样就不会占用多余的位置，特别是在一些相对复杂相对精确的地方，这样写更容易计算，且减少失误

经常用到的效果

CSS:

.tooltip{
position: relative; 
width:180px; 
height:40px; 
padding-top: 8px; 

}
.tooltip .triangle{
	position: absolute; 
	top:0; 
	left:50%;
	margin-left:-4px;
	width: 0;
height:0;
line-height:0;
overflow:hidden;
border-width:0px 8px 8px 8px;
border-style:solid;
border-color:transparent transparent  #6b6b6b transparent ;
	}
.tooltip .content{
	width:180px; 
	height:40px; 
	border: #6b6b6b solid 1px; 
	background:#6b6b6b;
	border-radius: 3px;
	}

HTML:

带边框的，用两个三角型重叠，留出一点间隙就是边框了

CSS:

.tooltip2{
position: relative; 
width:180px; 
height:40px; 
padding-top: 8px; 


}

.tooltip2 .trianglebg{
	position: absolute; 
	top:0; 
	left:50%;
	margin-left:-4px;
	width: 0;
	height:0;
	line-height:0;
	overflow:hidden;
	border-width:0px 8px 8px 8px;
	border-style:solid;
	border-color:transparent transparent #c11e1e transparent ;
	}
	
.tooltip2 .triangle{
	position: absolute; 
	top:1px; 
	left:50%;
	margin-left:-4px;
	width: 0;
	height:0;
	line-height:0;
	overflow:hidden;
	border-width:0px 8px 8px 8px;
	border-style:solid;
	border-color:transparent transparent  #f6f6f6 transparent ;
	}
	
.tooltip2 .content{
	width:180px; 
	height:40px; 
	border: #c11e1e solid 1px; 
	background:#f6f6f6;
	border-radius: 3px;
	}

HTML:

DEMO文件下载

awebTriangular.zip