Como posso alinhar as div's de forma que a parte branca fique preenchida com os elementos abaixo dela (5,6,7)?
main {
width: 200px;
display: flex;
flex-wrap: wrap;
text-align: center;
line-height: 50px;
font-size: 15px;
font-weight: bold;
color: #fff;
}
div {
width: 50px;
height: 50px;
background-color: #581b98;
}
div:first-child {
height: 100px;
background-color: #ff304f;
}
div:last-child{
background-color: #faee1c;
}
/*Flecha para exemplo*/
#teste{
position: absolute;
transform: rotate(300deg) translate(100px, 30px);
clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
background: red;
}
<main>
<div></div>
<div></div>
<div></div>
<div></div>
<div>5</div>
<div>6</div>
<div>7</div>
<div></div>
</main>
<div id="teste"></div>
dense
, vc consiga o resultado que deseja