1、生成四个不同颜色方向的梯形
#ladder{ width:20px; height:20px; border:10px solid; border-color:#ff3300 #0000ff #339966 #00ff00; }
2、只显示一个方向的梯形
#ladder-top{ width:20px; height:20px; border:10px solid; border-color:#ff3300 transparent transparent transparent; border-style:solid dashed dashed dashed; }
#ladder-bottom{ width:20px; height:20px; border:10px solid; border-color:transparent transparent #339966 transparent; border-style:dashed dashed solid dashed; }
3、设置宽度和高度为0，使梯形转换为三角形
#triangle-top{ width:0px; height:0px; border:10px solid; border-color:#ff3300 transparent transparent transparent;/ border-style:solid dashed dashed dashed; }
#triangle-bottom{ width:0px; height:0px; border:10px solid; border-color:transparent transparent #339966 transparent;/ border-style:dashed dashed solid dashed; }
4、实战：纯css实现文字提示框
.yitip-wrapper{ padding-top:20px; }
.yitip{ position:absolute; left:-40px; top:-14px; padding:6px 12px; background-color:white; font-size:12px; line-height:; text-decoration:none; text-align:center; text-shadow:0 0 1px white; white-space:nowrap; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background-color:#f9f2ba; border:1px solid #e9d315; color:#5b5316; }
.yitip .pointyTipShadow,.yitip .pointyTip{ position:absolute; border:6px solid; border-color:#e9d315 transparent transparent transparent; border-style:solid dashed dashed dashed; bottom:-12px; width:;height:; left:50%; margin-left:-6px; }
.yitip .pointyTip{ border-top-color:#f9f2ba; } .yitip .pointyTipShadow{ border-width:7px !important; bottom:-14px; margin-left:-7px; }
转：http://www.36ria.com/demo/triangle/#