css div网页折叠层 - 技术教程

下面提供一款经典的实例是一款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>

相关文章：

你感兴趣的文章：

标签云：