黑蓝搭配的横向折角CSS菜单_菜单导航特效

黑蓝搭配的横向折角CSS菜单，亮点就是它的折角，完全是用CSS实现，没有使用任何带有修饰性的资源图片等。好好研究一下这段代码，试着把折角改小一点，这样就会接近圆角的效果，还不错吧？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>黑蓝搭配的横向折角CSS导航菜单</title>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<style>
#container {
  position:relative; 
  }
#menu {
  text-align:center; 
  position:relative; 
  height:8em;
  }
.box {
  position:relative; 
  float:left; 
  top:30px;
  }
#menu a, #menu a:visited {
/* / */
  position:relative; 
  text-decoration:none; 
  background-color:#06a; 
  color:#fff; 
  display:block; 
  width:70px; 
font-size:9pt;
  height:15px; 
  padding:5px;
  margin:0 1px;
  }
#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; 
  }
#menu a .topright {
  left:70px; 
  border-left:10px solid #06a; 
  }
#menu a:hover {
  background-color:#000; 
  }
#menu a:hover .topleft {
  border-right:10px solid #000; 
  border-top:10px solid #fff;
  }
#menu a:hover .topright {
  border-left:10px solid #000; 
  border-top:10px solid #fff;
  }
</style>
</head>
<body>
<div id="container">
  <div id="menu">
    <div class="box">
      <a href="/">
       CodeFans
        <span class="topleft"></span>
        <span class="topright"></span>
      </a>
    </div>
    <div class="box">
      <a href="/">
        ASP
        <span class="topleft"></span>
        <span class="topright"></span>
      </a>
    </div>
    <div class="box">
      <a href="/">
       PHP
        <span class="topleft"></span>
        <span class="topright"></span>
      </a>
    </div>
    <div class="box">
      <a href="/">
       AJAX
        <span class="topleft"></span>
        <span class="topright"></span>
      </a>
    </div>
    <div class="box">
      <a href="/">
        JQUERY
        <span class="topleft"></span>
        <span class="topright"></span>
      </a>
    </div>
  </div>
</div>
</body>
</html>

所属频道：菜单导航特效/更新时间：2010-05-22

[收藏][报错][返回列表]

黑蓝搭配的横向折角CSS菜单_菜单导航特效

菜单导航特效Rss订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些