Estava fazendo um layout no figma, e to passando ele pra html e css, mas eu queria fazer uma animação. Como dar pra ver eu tenho um triangulo rosa, e eu queria que ao passar o mouse sobre ele, ele ampliasse e "pegasse" a parte azul (escritas quando tiver também), e toda a tela ficasse rosa sobrepondo a cor azul.
body{
background-color:#3ED3F3;
}
.triangulo {
width: 0;
height: 0;
border-top: 300px solid transparent;
border-bottom: 300px solid transparent;
border-left: 600px solid #F33E8A;
position: absolute;
left: 0px;
top:0px;
}
.triangulo:hover{
}
<body>
<div class="container">
<div class="triangulo"> </div>
</div>
</body>