使用html div 画一个简易的房子

最新推荐文章于 2022-12-05 22:00:26 发布

聪聪那年22

最新推荐文章于 2022-12-05 22:00:26 发布

阅读量1.8k

点赞数 1

分类专栏：前端文章标签： html div 房子

本文链接：https://blog.csdn.net/qq_40898500/article/details/102609408

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

直接上源码：


<!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>

聪聪那年22

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
使用html div 画一个简易的房子

直接上源码：<!doctype html><html><head><meta charset="utf-8"><title>CSS样式»</title><style>.border-up{width: 0;height: 0;border-left: 150px solid trans...
复制链接

扫一扫

专栏目录