estoy tratando de mover 2 divs verticalmente en su lugar y no se moverán hacia abajo. Probé un par de cosas como agregar arriba y abajo a #btnL1 y #btnL2, pero no hacen nada. cuando trato de establecer la posición de ellos en absoluto, ya no son visibles, pero siguen ahí. aquí está el enlace al sitio en el que estoy trabajando: https://orbiting-simulator.erodecode.repl.co
.menuBtn { position: absolute; width: 60px; top: 3%; left: 3%; box-shadow: -12px 12px 1em 0em rgb(0 0 0 / 20%); border-radius: 5px; background-color: rgba(255, 255, 255, .15); backdrop-filter: blur(3px); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: transform 100ms ease-in-out; } .menuBtn:after { content: ''; display: block; padding-bottom: 100%; } .btnL { position: absolute; width: 80%; height: 80%; top: 10%; left: 10%; } #btnL1 { height: 15%; background: darkcyan; border-radius: 5px; transform: rotate(45deg); } #btnL2 { height: 15%; background: darkcyan; border-radius: 5px; transform: rotate(-45deg); } <div class='menuBtn' onclick='menuOpen()'> <div class='btnL'> <div id='btnL1'></div> <div id='btnL2'></div> </div> </div>No son visibles porque falta el atributo de width . Con esto debería tener el efecto que buscas:
#btnL1 { height: 15%; background: darkcyan; border-radius: 5px; transform: rotate(45deg); width: 50px; position: absolute; top: 20px; } #btnL2 { height: 15%; background: darkcyan; border-radius: 5px; transform: rotate(-45deg); width: 50px; position: absolute; top: 20px; }Una solución mejor y más limpia para su HTML y CSS sería:
CSS
.menuBtn { position: absolute; width: 60px; height: 60px; top: 40%; left: 3%; box-shadow: -12px 12px 1em 0em rgb(0 0 0 / 20%); border-radius: 5px; background-color: rgba(255, 255, 255, .15); backdrop-filter: blur(3px); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: transform 100ms ease-in-out; } #btnL1, #btnL2 { height: 60px; background: darkcyan; border-radius: 5px; transform: rotate(45deg); position: absolute; width: 7px; margin: 0 auto; left: 0; right: 0; } #btnL2 { transform: rotate(-45deg); }HTML
<div class="menuBtn" onclick="menuOpen()"> <div id="btnL1"></div> <div id="btnL2"></div> </div> Tenga en cuenta que ya no necesita el contenedor div <div class="btnL"> ni la clase .menuBtn:after