I am looking to generate a rectangle shape of 12 houses chart using CSS. The best I could use is CSS-doodle code below; even that it is nowhere perfect. How can the example images below can be accomplished? The structure has to be a single structure, and I want to add text to all houses.
<css-doodle >
:doodle {
overflow: hidden;
height:14em; width:16em;
@grid: 4;
}
:container {
grid-gap: 1px;
transform: rotate(45deg) scale(1.5);
}
background: #d0262e;
</css-doodle>
Here is an idea with one element and some background tricks. It's also responsive, you can resize the element and the structure will be kept the same. I also considered order
to correctly place the elements
.box {
width:280px;
height:180px;
border:3px solid;
display:flex;
flex-wrap:wrap;
background:
linear-gradient(to top right,transparent calc(50% - 2px), #000 calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 2px)),
linear-gradient(to top left ,transparent calc(50% - 2px), #000 calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 2px));
background-size:50% 50%;
counter-reset:num;
overflow:hidden;
resize:both;
}
.box span {
flex-grow:1;
flex-basis:50%;
height:25%;
display:flex;
align-items:center;
justify-content:center;
}
.box span:nth-child(3),
.box span:nth-child(5),
.box span:nth-child(9),
.box span:nth-child(11) {
flex-basis:25%;
}
.box span:nth-child(2),
.box span:nth-child(6),
.box span:nth-child(8),
.box span:nth-child(12) {
height:12.5%;
}
span:before {
content:counter(num);
counter-increment:num;
}
<div class="box">
<span style="order:4"></span>
<span style="order:1"></span>
<span style="order:3"></span>
<span style="order:6"></span>
<span style="order:8"></span>
<span style="order:11"></span>
<span style="order:9"></span>
<span style="order:12"></span>
<span style="order:10"></span>
<span style="order:7"></span>
<span style="order:5"></span>
<span style="order:2"></span>
</div>