1、生成四个不同颜色方向的梯形
![](//images0.cnblogs.com/blog/350843/201309/08103122-8fb761d4efb542b49ef554a7dab3f3bc.png)
#ladder{ width:20px; height:20px; border:10px solid; border-color:#ff3300 #0000ff #339966 #00ff00; }
2、只显示一个方向的梯形
![](//images0.cnblogs.com/blog/350843/201309/08103239-7dfa0e85219046a29c0ec0f676a8d93f.png)
#ladder-top{ width:20px; height:20px; border:10px solid; border-color:#ff3300 transparent transparent transparent; border-style:solid dashed dashed dashed; }
![](//images0.cnblogs.com/blog/350843/201309/08103346-0435b3d732cc4aadbe2b45c7a6ab6013.png)
#ladder-bottom{ width:20px; height:20px; border:10px solid; border-color:transparent transparent #339966 transparent; border-style:dashed dashed solid dashed; }
3、设置宽度和高度为0,使梯形转换为三角形
![](//images0.cnblogs.com/blog/350843/201309/08103444-8acead4eeb1d4858b7100b5fb95f705f.png)
#triangle-top{ width:0px; height:0px; border:10px solid; border-color:#ff3300 transparent transparent transparent;/ border-style:solid dashed dashed dashed; }
![](//images0.cnblogs.com/blog/350843/201309/08103535-30c0a6199615421f99c17b9fdc9bb7de.png)
#triangle-bottom{ width:0px; height:0px; border:10px solid; border-color:transparent transparent #339966 transparent;/ border-style:dashed dashed solid dashed; }
4、实战:纯css实现文字提示框
![](//images0.cnblogs.com/blog/350843/201309/08103623-4c9b4bb0ba364322aec94a69b05c56d7.png)
.yitip-wrapper{ padding-top:20px; }
.yitip{ position:absolute; left:-40px; top:-14px; padding:6px 12px; background-color:white; font-size:12px; line-height:1; 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:0;height:0; 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/#