黑蓝搭配的横向折角CSS菜单

2024-09-05 12:19:35

字体：大中小

来源：转载

供稿：网友

黑蓝搭配的横向折角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" content="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">             CodeFans        <span class="topleft"></span>        <span class="topright"></span>          </div>    <div class="box">              ASP        <span class="topleft"></span>        <span class="topright"></span>          </div>    <div class="box">             PHP        <span class="topleft"></span>        <span class="topright"></span>          </div>    <div class="box">             AJAX        <span class="topleft"></span>        <span class="topright"></span>          </div>    <div class="box">              JQUERY        <span class="topleft"></span>        <span class="topright"></span>          </div>  </div></div></body></html>

上一篇：两边带箭头指示的CSS竖向列表菜单

下一篇：鼠标右键菜单，仿系统

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注