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

[Anonymous]

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

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

C
C#
...
B

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

: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;
}

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

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

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

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