下面提供一款经典的css实例是一款css div网页折叠层效果代码。
拷贝以上html代码，保存并在你的浏览器中打开，就可以查看到折叠效果了，可能IE下的效果比较单调，再次鄙视IE。这里的关键技术是class=\\\\\\\"arrow\\\\\\\"这个类，它产生了一个三角形状，让你看起来就像是一条带子被折叠了一样，控制这个类的CSS代码为：
代码如下
复制代码
.arrow {
width: 0;
height: 0;
line-height: 0;
border-left: 20px solid transparent;
border-top: 10px solid #c8c8c8;
top: 104%;
left: 0;
position: absolute;
}
这其中关键的属性是border-left 和 border-top，这两个属性形成了一个三角形效果，也就是带子的拐角效果，你可以将以上代码的5、6行，做如下更改，看看效果：
1
2
代码如下
复制代码
border-right: 20px solid transparent;
border-top: 10px solid #c8c8c8;
再做一次更改，看看什么效果：
1
2
代码如下
复制代码
border-left: 20px solid transparent;
border-bottom: 10px solid #c8c8c8;
通过这几次更改，你可以看到，border-right、border-left和border-bottom、border-top的不同组合，可以实现三角形的不同的朝向，你可以举一反三制作你的折叠效果了
下面看效果
代码如下
复制代码
<!doctype html>
<html xmlns="http://www.111cn.net/1999/xhtml">
<head>
<meta charset="utf-8">
<title>css shapes</title>
<style type="text/css">
<!--
#container {
background: #666;
margin: auto;
width: 500px;
height: 700px;
padding-top: 30px;
}
h1 {
background: #e3e3e3;
background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8);
background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#c8c8c8));
padding: 10px 20px;
margin-left: -20px;
margin-top: 0;
position: relative;
width: 70%;
-moz-box-shadow: 1px 1px 3px #292929;
-webkit-box-shadow: 1px 1px 3px #292929;
box-shadow: 1px 1px 3px #292929;
color: #454545;
text-shadow: 0 1px 0 white;
}
.arrow {
width: 0;
height: 0;
line-height: 0;
border-left: 20px solid transparent;
border-top: 10px solid #c8c8c8;
top: 104%;
left: 0;
position: absolute;
}
-->
</style>
<!--[if ie]>
<style>
.arrow {
top: 100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<h1> 我的标题 <span class="arrow"></span> </h1>
</div>
</body>
</html>
