关于border的新发现

当我看到http://www.cssplay.co.uk/menus/menueight.html
中那个斜切的菜单时，感到很奇特
一般说来，如果使用背景图片
实现这样的导航菜单，甚至实现圆角的菜单都很容易
可是这个菜单完全是用css写成的
于是看他的代码
经过分析后，终于发现
核心集中在下面几行代码上
#menu a .topleft, #menu a .topright {
  position:absolute;
  top:0;
  width:0;
  height:0;
  overflow:hidden;
  border-top:10px solid #fff;
  }
#menu a .topleft {
  left:0;
  border-right:10px solid #06a;
  }
他的xhtml是
<div id="menu">
    <div class="box">
      <a href="#nogo">
        Item 1
        <span class="topleft"></span>
        <span class="topright"></span>
      </a>
    </div>
</div>
后来研究发现
通过一个width,height都为0的span
指定不为零的border-top and border-right
如果两个border的值相等，但是color不一样的话
就可以实现一个45度斜线的效果
根据两个border的比例，可以做出不同角度的斜线来
下面是我自己试验写的
#topleft{
  position:absolute;
  margin-top:200px;
  margin-left:20px;
  width:0px;
  height:0px;
  overflow:auto;
  border-top:70px solid #fff;
  border-right:70px solid #06a;
}

xhtml
  <div id="topleft"></div>

效果也是一样的

ps.心得
在解决这个问题的过程中
我先是求助于网络
开始怀疑是不是因为span的问题
结果查了好多资料
没有说与他有关的
实在找不到
只好自己来研究，结果没花半个小时
就琢磨出来了
开来以后对于网络的依赖得减少些阿
要自己多思考