关于border的新发现

最新推荐文章于 2025-08-25 10:16:49 发布

原创最新推荐文章于 2025-08-25 10:16:49 发布 · 930 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#border #xhtml #class #div #网络 #menu

Web 2.0 专栏收录该内容

37 篇文章

订阅专栏

博客介绍了一个用CSS写成的斜切导航菜单，分析其核心代码，发现通过设置width和height为0的span元素，指定不同颜色和比例的border-top与border-right，可实现不同角度斜线效果，还分享了减少对网络依赖、自主思考解决问题的心得。

当我看到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;
}