直接上源码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS样式»</title>
<style>
.border-up{
width: 0;
height: 0;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-bottom:150px solid #333;
position: relative;
margin: 50px auto;
background-image:linear-gradient(45deg,#a95f44 26%,transparent 0,transparent 75%,#a95f44 0),
linear-gradient(45deg,#a95f44 26%,transparent 0,transparent 75%,#a95f44 0);
background-size:30px 30px;
background-position:0 0,15px 15px;
}
.border-up span{
display: block;
width: 0;height: 0;
border-left: 147px solid transparent;
border-right: 145px solid transparent;
border-bottom: 147px solid #F0981C;
position: absolute;left: -147px;
top: 1px;}
.div3{
width:40px;
height:40px;
background-color:transparent;
float:left;
}
.div-border1{
border-top:solid 1px;
border-left:solid 1px;
border-bottom:solid 1px;
}
.div-border2{
border-top:solid 1px;
border-right:solid 1px;
border-left:solid 1px;
border-bottom:solid 1px;
}
.div-border3{
border-left:solid 1px;
border-bottom:solid 1px;
}
.div-border4{
border-right:solid 1px;
border-left:solid 1px;
border-bottom:solid 1px;
}
.div{
width:120px;
height:40px;
top:56px;
margin-left:-45px;
z-index: 99999;
position:relative;
}
.chimney{
background-image:linear-gradient(45deg,#a95f44 26%,transparent 0,transparent 75%,#a95f44 0),
linear-gradient(45deg,#a95f44 26%,transparent 0,transparent 75%,#a95f44 0);
background-size:30px 30px;
background-position:0 0,15px 15px;
width: 30px;
height: 80px;
border: 1px solid;
margin-left: 40px;
margin-top: -30px;
}
.house{
width: 240px;
height: 200px;
border: 1px solid;
background-color: #FFFFFF;
margin-left: -122px;
margin-top: 56px;
}
</style>
</head>
<body>
<div class="border-up">
<span>
</span>
<div class="div">
<div class="div3 div-border1"></div>
<div class="div3 div-border2"></div>
<div class="div3 div-border3"></div>
<div class="div3 div-border4"></div>
</div>
<div class="chimney" style=""></div>
<div class="house"></div>
</div>
</body>
</html>