纯css制作一个梯形可以吗,利用纯CSS实现小三角、小梯形

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

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

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

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

下边是相应的的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;}