本案列中，制作一个带有斜角的水平菜单。依然和上例一样，他也是自适应快读。
如
本例的关键在于，如何制作出左上角这个斜角。如果有了上例，制作 “带箭头的菜单“的经验，掌握使用“钩子”的方法，这个例子就很容易实现了
核心思想就是利用边框的接角位置构造出一个斜角，然后使用“钩子”的方法挂到每一个菜单项的左上角去。如果掌握了以后，可以放到任何一个角上去。
对于每个菜单的a元素，放置一个span元素，设为corner类别，并作为CSS“钩子”，用于实现斜角效果，代码如下所示：
<div id="menu">
<a href="#">
<span class="men"></span>
Home</a>
<a href="#">
<span class="men"></span>
Contact Us</a>
<a href="#">
<span class="men"></span>
Web Dev</a>
<a href="#">
<span class="men"></span>
Web Design</a>
<a href="#">
<span class="men"></span>
Map</a>
</div>
首先设置#menu容器。代码如下：
#menu {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
接着，设置每个菜单项的基本属性，代码如下：
#menu a,#menu a:visited{
display:block;
float:left;
position:relative;
text-decoration:none;
color:#FFF;
background:#F00;
padding:8px 4px;
margin:0 0 1px;
}
此时在浏览器中效果如图
接下来就是设置斜角的方法了，这边的写法稍有不同，本质趋势完全相同。
#menu a .men{
position:absolute;
height:0;
width:0;
overflow:hidden;
border-bottom:solid 6px #F00;
border-left:solid 6px #FFF;
top:0;
left:0;
}
接下来就是设置鼠标经过的效果了，代码如下
#menu a:hover{
color:#000;
background:#F90;
}
这是效果如图，这就有点像“折角”的效果，看起来也不错，如果喜欢这个效果可以到这里就结束了。
如果希望鼠标经过，斜角部分也变成背景色，可以增加一下代码：
#menu a:hover span.men{
border-bottom:solid 6px #f90; /*若不加这行代码则是另一种效果*/
}
这样鼠标经过的效果就是我们最终想要的效果了，如图所示：
至此我们得这个案例已经完成了，如你所见，你可以改变它的颜色，也可以把四个角都做成折角。
