抄于http://dongtianee.sinaapp.com/demo9.html
/****************************************************************************************/
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS绘制三角形和小房子</title>
<style>
body {
background: #eee;
font: normal normal 16px/1.5 "微软雅黑", sans-serif;
}
.main {
max- 1000px;
background: #fff;
padding: 30px 10px;
margin: auto;
position: relative;
box-shadow: 2px 2px 10px 5px #555;
}
.title {
border-bottom: 1px dotted #3399ff;
padding-bottom: 5px;
margin-bottom: 15px;
}
.footer {
margin-top: 20px;
border-top: 1px solid #a5a5a5;
padding: 10px;
text-align: center;
}
</style>
<!--CSS——begin——-->
<style>
.down {
display: inline-block;
0;
height: 0;
border-top: 10px solid #000;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.down1 {
display: inline-block;
0;
height: 0;
border-left: 10px solid #000;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
.down2 {
display: inline-block;
0;
height: 0;
border-bottom: 10px solid #000;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.down3 {
display: inline-block;
0;
height: 0;
border-right: 10px solid #000;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
.icon-home {
40px;
height: 40px;
display: block;
position: relative
}
.icon-home:before {
content: '';
height: 0px;
0px;
display: block;
position: absolute;
top: 0px;
left: 0px;
border: 20px solid transparent;
border-bottom-color: #333;
border-top: 0
}
.icon-home:after {
content: '';
height: 12px;
12px;
display: block;
position: absolute;
top: 18px;
left: 6px;
border: 8px #333 solid;
border-top- 10px;
border-bottom: 0;
}
</style>
<!--CSS——end——-->
</head>
<body>
<div class="main">
<div class="title"><<<a href="index.html">查看全部Demo</a></div>
<h1>CSS绘制三角形和小房子</h1>
<p>利用border模拟三角形</p>
<div>
<span class="down"></span>
<span class="down1"></span>
<span class="down2"></span>
<span class="down3"></span>
</div>
<p>使用css绘制小房子图案</p>
<span class="icon-home"></span>
</div>
</body>
</html>