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

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

基本原理:

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

1409536704531198.png

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画多种图形


向上的箭头

1409536820891201.png


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 ;/*透明 透明 黑 透明 */
}


向右的箭头

1409537452229354.png

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;/*透明  透明 透明 绿*/
}



向下的箭头

1409537493808487.png

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 ;/*红 透明 透明 透明 */
}



向左的箭头

1409537526915053.png

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;/*透明 黄  透明 透明*/
}



左上的箭头

1409537558330422.png

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;
}



右上的箭头

1409537574804621.png

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;
}



右下的箭头

1409537389130098.png

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;
}



左下的箭头

1409537357900086.png

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也是一样的效果

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

经常用到的效果

1409537289273664.png

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:


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

1409537298739623.png

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


版权及转载说明

本站原创、转载文章欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区

本站转载文章版权归原作者所有,如发现本站文章涉嫌侵权请点击「联系我们」反馈,本站将立即给予删除

转载请注明:文章转载自:全分享社区 「http://www.aweb.cc

本文标题:CSS画各种图型(1) —— 纯CSS画三角型

本文地址:http://www.aweb.cc/article/detail/id/168.html

网页上的摄影展:等高响应布局实现 <<上一篇 下一篇>>处理网页图片最常见的10个错误及其解决方