Разместите элемент div относительно его предыдущего брата (стиль клавиатуры фортепиано) ⇐ CSS

[Anonymous]

Я разрабатываю фортепианную клавиатуру с использованием HTML + CSS.

Моя структура кода следующая:

Код: Выделить всё

:root {
--piano-width: 600px;
--piano-height: 150px;
--piano-keys-gap: 1px;
--piano-black-keys-height-perc: 0.6;
}

.piano-keys {
display: flex;
flex-direction: row;
justify-content: center;
width: var(--piano-width);
height: var(--piano-height);
}

.piano-key {
position: relative;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
cursor: pointer;
}

.piano-key.key-white {
background-color: #eeeeee;
flex-basis: 100%;
}

.piano-key.key-black {
background-color: #333;
flex-basis: 90%;
height: calc(var(--piano-height) * var(--piano-black-keys-height-perc));
z-index: 1;
margin-left: -HALF_CURRENT_SIZE;
margin-right: -HALF_CURRENT_SIZE;
}

Код: Выделить всё

C
C#
...
B

Мне нужен способ расположить черные клавиши над белыми, учитывая что:

• Ширина клавиш является динамической, они должны заполнять размер родительского элемента div.
• Ширина черных клавиш немного меньше ширины белых клавиш (около 100% гибкой основы для белых и 90% гибкая основа для черного цвета)
• Я хочу иметь возможность контролировать зазор между клавишами в пикселях

Я обнаружил на веб-сайте, что, разместив отрицательные горизонтальные поля в половину ширины клавиши с каждой стороны, они перекрываются с желаемым эффектом. Но поскольку ширина динамическая, я не смог этого сделать.

Есть ли способ добиться такого эффекта без использования JavaScript?

Подробнее здесь: https://stackoverflow.com/questions/792 ... rd-styling