Dibujar una casa con CSS es posible mediante el uso de las propiedades de posicionamiento, transformación y diseño.
Puedes ajustar el tamaño y el diseño de cada elemento para que se asemeje más a la casa que deseas dibujar. También puedes utilizar diferentes técnicas como la creación de formas con CSS mediante el uso de pseudo-elementos, para mejorar el diseño de la casa.
Ten en cuenta que esta es solo una forma de dibujar una casa con CSS, existen otros métodos mediante el uso de librerías o frameworks para hacerlo de una forma más sencilla y con más opciones. Esta es la forma más simple y básica de hacerlo:
<style>
.house {
position: relative;
}
.roof {
position: absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid brown;
top: 0;
left: 25px;
}
.chimney {
position: absolute;
width: 20px;
height: 40px;
background-color: black;
top: 20px;
left: 45px;
}
.wall {
position: absolute;
width: 100px;
height: 100px;
background-color: grey;
top: 100px;
left: 25px;
}
.door {
position: absolute;
width: 30px;
height: 50px;
background-color: brown;
top: 150px;
left: 60px;
}
.window {
position: absolute;
width: 20px;
height: 20px;
background-color: white;
top: 110px;
left: 95px;
}
.window2 {
position: absolute;
width: 20px;
height: 20px;
background-color: white;
top: 110px;
left: 35px;
}
</style>Después creas un código HTML basado en capas:
<body>
<div class="house">
<div class="roof"></div>
<div class="chimney"></div>
<div class="wall"></div>
<div class="door"></div>
<div class="window"></div>
<div class="window2"></div>
</div>
</body>Y el resultado de este código lo puedes ver aquí
Este tutorial forma parte de nuestros contenidos básicos de programación. También te puede interesar:
Cómo crear un botón con CSS, HTML y JavaScript
