制作斜角菜單就是利用邊框的接角構造一個斜角，每一個菜單項的a元素，放置一個span元素，設置為corner類，實現斜角效果。
設置a元素為相對定位，a是span的子元素設置其為絕對定位，再設置span的top和left為零，以便使斜角定位在以邊框為界的左上角。
以下代碼顯示效果如下
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>斜角菜單</title> <style type="text/css"> #menu { font-family:arial; font-size:14px; } #menu a,#manu a:visited{ text-decoration:none; float:left; color:#fff; display:block; background-color:#00f; padding:6px; margin:1px 0 0 1px; position:relative; } #menu a .corner{ position:absolute; height:0; width:0; overflow:hidden; border-bottom:solid 6px #00f; border-left:solid 6px #fff; top:0; left:0; } </style> </head> <body> <div id="menu"> <a href="#"><span class="corner"></span>菜單1</a> <a href="#"><span class="corner"></span>菜單2</a> <a href="#"><span class="corner"></span>菜單3</a> <a href="#"><span class="corner"></span>菜單4</a> <a href="#"><span class="corner"></span>菜單5</a> </div> </body> </html>