Wszystko szło dobrze do momentu, kiedy miałem za pomocą top i left ustawić dach na prostokącie
elementy możesz ze sobą łączyć używając "normalnego flow" strony, a animacji "dokonać" za pomocą transform.
drugi problem, który zauważyłem, że podstawa trójkąta nie jest całkowicie równa z bokiem prostokąta,
to w tym przypadku nie powinien być "problem", bo domy mają zazwyczaj dachy nieco "szersze"
Sprawdź
<button>Rozwal</button>
<div class="construction-site">
<div class="roof"></div>
<div class="base"></div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100vw;
height: 100vh;
overflow: hidden;
}
button {
position: absolute;
top: 1em;
left: 1em;
padding: 1.5em 3em;
border-radius: 1em;
background-color: brown;
color: white;
cursor: default;
font: 400 1.5em/1.2 system-ui;
font-variant: small-caps;
transition: background 550ms;
}
button:hover {
background-color: red;
color: black;
}
button:hover ~ .construction-site .roof {
transform: translate(0, -150%) rotate(-360deg) scale(0.2);
opacity: 0;
}
button:hover ~ .construction-site .base {
transform: translate(-200%, 20%) rotate(120deg) scale(1.5);
}
.construction-site {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
height: 100%;
}
.roof {
width: 0;
height: 0;
background-color: transparent;
border-left: 40vh transparent solid;
border-right: 40vh transparent solid;
border-bottom: 20vh black solid;
transition: transform 2s, opacity 2s;
}
.base {
width: 40vw;
height: 30vh;
background-color: brown;
transition: transform 2s cubic-bezier(0.5,-0.8,0.25,1.4);
}
[ cubic-bezier ]