css 写的小房子图形

CSS是一种比较重要的网页设计语言，它可以定义网页的布局、颜色、字体等多个方面的样式。今天我们来学习创建一个带屋顶的小房子图形的CSS编写方法。

.house {
        position: relative;
        width: 100px;
        height: 80px;
        background-color: #F4A460;
        border-radius: 2px;
        margin: 10px auto;
}
.house:before {
        content: "";
        position: absolute;
        top: -20px;
        left: 0;
        right: 0;
        margin: auto;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 50px 20px 50px;
        border-color: transparent transparent #F4A460 transparent;
}
.chimney {
        position: absolute;
        top: -40px;
        left: 50%;
        margin-left: -10px;
        width: 20px;
        height: 30px;
        background-color: #555;
        border-radius: 2px;
}
.window {
        position: absolute;
        top: 30px;
        left: 20px;
        width: 20px;
        height: 20px;
        background-color: white;
        border: 2px solid #8B0000;
        border-radius: 2px;
}
.window.right {
        left: 60px;
}
    

以上代码中，我们首先使用CSS创建了一个带圆角的小房子，深浅橙色的背景显得比较温暖舒适。在小房子的头顶上，我们使用:before伪元素的方式来实现屋顶的效果，其中采用了border样式来定义三角形的形态，使它能够完美贴合在房子正上方。在房子右侧还添加了一个烟囱的元素，并将其居中显示，再在房子的两侧分别添加了两个白色的窗户，这里还使用了位置绝对布局，使视觉效果更佳明显。

最后，我们预览一下经过上述CSS样式编写完毕后的小房子图形，看看它美不美呀：

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！