css制作房子
使用CSS绘制简单房子
通过CSS的::before、::after伪元素和border属性可以创建矢量风格的房子图形。以下是一个完整的实现示例：
<!DOCTYPE html>
<html>
<head>
<style>
.house {
position: relative;
width: 200px;
height: 150px;
background-color: #FFD700;
margin: 100px auto;
}
.roof {
position: absolute;
top: -50px;
left: 0;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 50px solid #8B4513;
}
.door {
position: absolute;
bottom: 0;
left: 80px;
width: 40px;
height: 60px;
background-color: #A52A2A;
}
.window {
position: absolute;
top: 40px;
left: 30px;
width: 40px;
height: 40px;
background-color: #87CEEB;
border: 3px solid #000;
}
.window::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
background: #000;
}
.window::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 2px;
height: 100%;
background: #000;
}
</style>
</head>
<body>
<div class="house">
<div class="roof"></div>
<div class="door"></div>
<div class="window"></div>
</div>
</body>
</html>关键实现技术
屋顶三角形
通过设置元素的border属性创建三角形效果。设置左右边框为透明，底部边框显示颜色，形成三角形屋顶：
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 50px solid #8B4513;窗户十字分割
使用伪元素创建窗户的十字分割线。::before创建垂直线，::after创建水平线：
.window::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 2px;
height: 100%;
background: #000;
}定位系统
所有元素使用position: absolute进行精确定位，主容器使用position: relative作为定位基准点。
进阶变形效果
添加悬停动画效果，使房子更具交互性：
.house:hover {
transform: scale(1.1);
transition: transform 0.3s ease;
}
.door:hover {
background-color: #800000;
}响应式调整
通过媒体查询使房子适应不同屏幕尺寸：
@media (max-width: 600px) {
.house {
transform: scale(0.7);
}
}这种纯CSS实现方式不依赖图片资源，适合需要轻量级矢量图形的场景，修改颜色和尺寸也非常方便。
