| 代碼如下 |
複製代碼 |
| .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> |
