.desk { width: 600px; height: 220px; position: absolute; left: 50%; bottom: 48px; margin-left: -300px; .bench, .leg { position: absolute; } .bench { top: 0; height: 18px; transform: scaleX(0); } .bench-1 { background-color: #e1f0f7; right: 50%; width: 245px; margin-right: 55px; transform-origin: right; z-index: 1; } .bench-2 { background-color: #d0e1e9; width: 360px; left: 50%; margin-left: -60px; transform-origin: left; z-index: 3; } .leg { width: 24px; top: 18px; height: 205px; transform-origin: top; transform: scaleY(0); &:before, &:after { content: ''; width: 50%; height: 100%; position: absolute; top: 0; } &:before { left: 0; } &:after { right: 0; } } .leg-1 { left: 0; } .leg-2 { left: 228px; } .leg-3 { right: 245px; } .leg-4 { right: 0; } .leg-1, .leg-3 { z-index: 1; } .leg-2, .leg-4 { z-index: 3; } .leg-1:before { background-color: #e1f0f7; } .leg-1:after { background-color: #d0e1e9; } .leg-2:before { background-color: #e1f0f7; } .leg-2:after { background-color: #d0e1e9; } .leg-3:before { background-color: #b9d2d5; } .leg-3:after { background-color: #d0e1e9; } .leg-4:before { background-color: #b9d2d5; } .leg-4:after { background-color: #d0e1e9; } }