例1.设置高、宽、边框后，框会出现如下图：.triangle{width:25px;高度：25px；溢出：隐藏；字体大小：0；行高：0；边框宽度：50px；rgb(76,0,255)rgb(46,205,245);}注意：设置overflow,font-size,line-height，因为在IE6下会有默认的字号和行高，导致框渲染disabled一个长长的矩形伸展开来。例2将例1中的width和height设置为0后，出现的框如下图：.triangle{width:0;高度：0；溢出：隐藏；字体大小：0；行高：0；边框宽度：50px；边框样式：实心；border-color:rgb(235,54,241)rgb(86,245,139)rgb(76,0,255)rgb(46,205,245);}此时可以看出方框是由四个三角形组成。如果只保留一种颜色，将其他3种颜色设置为透明或者与背景同色，就可以实现一个三角形。根据不同位置留边的选择，可以呈现出不同朝向的三角形。例3.只保留底部的edge.triangle{width:0;高度：0；溢出：隐藏；字体大小：0；行高：0；边框宽度：50px；边框样式：实心；border-color:transparenttransparentrgb(76,0,255)transparent;}例4：保留例3中的宽高，可以得到梯形。叠加实现。用偏移1px的白色三角形覆盖蓝色三角形以形成箭头。以下样式实现了向上箭头：.arrow{position:absolute;}.arrow:before,.arrow:after{position:absolute;内容：'';border-top:10px透明实体；左边框：10px透明实体；border-right:10px透明实体；border-bottom:10px#fffsolid;}.arrow:before{border-bottom:10px#0099CCsolid;}.arrow:after{top:1px;*/border-bottom:10px#fffsolid;}