本篇主要采用的是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