Есть зелёный бокс-родитель с настройками:
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
В нём находятся 7 зелёных radio
с плавающими/летающими размерами, называйте как хотите (14% от ширины родительского).
Нужно добавить по верх них ещё пару штук radio
которые будут накладываться на них сверху с размерами (7% от ширины родительского и 2/3 высоты от зелёных) при этом, чтобы не смещались зелёные. Варианты с точными размерами не предлагать, только относительные в %.
<div class="octave-box">
<div class="white-note"></div>
<div class="black-note"></div>
<div class="white-note"></div>
<div class="black-note"></div>
<div class="white-note"></div>
<div class="white-note"></div>
<div class="black-note"></div>
<div class="white-note"></div>
<div class="black-note"></div>
<div class="white-note"></div>
<div class="black-note"></div>
<div class="white-note"></div>
</div>
!При этом чтобы между чёрными был пробел, и если на него кликнуть - работал нижний зелёный.
Вот LESS код:
.octave-box{
.bgcl_cl(@red, @white);
.bd_color(@grey);
.margin_ALL;
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
min-width: 30%;
max-width: 30%;
min-height: 98%;
max-height: 98%;
}