css学习：斜角菜单的制作
浏览数：19 /
时间：2015年06月09日
制作斜角菜单就是利用边框的接角构造一个斜角，每一个菜单项的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>郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
