利用CSS3新特性创建透明边框三角

先来看一下效果，这在CSS3之前，完全是不可想象的，只有图片才能做的到，但在HTML5和CSS3大行其道的今天，实现这种效果，那都不是事啊。

看一下实现的代码：

！DOCTYPE html html head style TYPe=' text/CSS '/*上三角*/.向上箭头{ width : 0；高度： 0;边框-左侧： 20像素实心透明；右边框： 20像素实心透明；边框-bottom: 20px纯绿色；}/* 下三角*/.向下箭头{ width : 0；高度： 0;边框-左侧： 20像素实心透明；右边框： 20像素实心透明；边框-top: 20px纯橙色；}/* 右三角*/.向右箭头{ width : 0；高度： 0;边框-顶部： 60px纯色透明；边框-底部： 60px实心透明；边框-左侧： 60px纯蓝；}/* 左三角*/.向左箭头{ width : 0；高度： 0;边框-top: 10px纯色透明；边框-bottom: 10px纯色透明；右边框： 10px纯银；}/style/headbody div class='向上箭头/div类='向下箭头/div类='向左箭头/div类='向右箭头/div/body/html