利用纯CSS实现小三角、小梯形

众所周知，盒模型(BoxModel)是CSS的核心，根据盒模型对块级元素设置适当的宽度和高度，然后利用盒子的边框(Border)就能够制造出形象各异的三角形甚至梯形，用小三角能实现诸如气泡提示等常见的效果，而梯形则可以间接模拟圆角矩形的实现。

下图是小三角在实际项目中的一个应用实例：

设置一个边框可见可实现传统的等腰（直角）三角形，设置两个相邻的边框可见可实现较其大一号的等腰直角三角形，如果给块级元素一个宽度和高度，就可以把小三角变成小梯形。

下边是具体实现的HTML代码：

 <!--普通等腰直角小三角-->
<div class="triangle mt15"></div>
<!--大一号的等腰直角小三角-->
<div class="triangle trapezoid mt15"></div>
<!--小梯形效果-->
<div class="triangle bigtriangle mt15"></div>
下边是相应的的CSS样式：

 .triangle {
 width:0px;
 height:0px;
 border-width:6px;
 border-color:maroon transparent transparent transparent;
 border-style:solid dashed dashed dashed;
 _line-height:0px;
 _font-size:0;
}
 
.trapezoid {
 width:10px;
 height:10px;
 border-color:maroon gray silver orange;
 border-style:solid solid solid solid;
}
 
.bigtriangle {
 border-color:maroon maroon transparent transparent;
 border-style:solid solid dashed dashed;
}
 
.mt15 {margin-top:15px;}