黑藍搭配的橫向折角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   class="iwvjtn8m0"   id="container">  <div   class="iwvjtn8m0"   id="menu">    <div   id="iwvjtn8m0"   class="box">             CodeFans        <span id="iwvjtn8m0"    class="topleft"></span>        <span id="iwvjtn8m0"    class="topright"></span>          </div>    <div   id="iwvjtn8m0"   class="box">              ASP        <span id="iwvjtn8m0"    class="topleft"></span>        <span id="iwvjtn8m0"    class="topright"></span>          </div>    <div   id="iwvjtn8m0"   class="box">             PHP        <span id="iwvjtn8m0"    class="topleft"></span>        <span id="iwvjtn8m0"    class="topright"></span>          </div>    <div   id="iwvjtn8m0"   class="box">             AJAX        <span id="iwvjtn8m0"    class="topleft"></span>        <span id="iwvjtn8m0"    class="topright"></span>          </div>    <div   id="iwvjtn8m0"   class="box">              JQUERY        <span id="iwvjtn8m0"    class="topleft"></span>        <span id="iwvjtn8m0"    class="topright"></span>          </div>  </div></div></body></html>

上一篇：兩邊帶箭頭指示的CSS豎向列表菜單

下一篇：鼠標右鍵菜單，仿系統