css 画基本图形

抄于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-width: 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;
width: 0;
height: 0;
border-top: 10px solid #000;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}

.down1 {
display: inline-block;
width: 0;
height: 0;
border-left: 10px solid #000;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}

.down2 {
display: inline-block;
width: 0;
height: 0;
border-bottom: 10px solid #000;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}

.down3 {
display: inline-block;
width: 0;
height: 0;
border-right: 10px solid #000;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}

.icon-home {
width: 40px;
height: 40px;
display: block;
position: relative
}

.icon-home:before {
content: '';
height: 0px;
width: 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;
width: 12px;
display: block;
position: absolute;
top: 18px;
left: 6px;
border: 8px #333 solid;
border-top-width: 10px;
border-bottom: 0;
}
</style>
<!--CSS——end——-->
</head>
<body>
<div class="main">
<div class="title">&lt;&lt;<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>

 

你可能感兴趣的:(css 画基本图形)