HTML
<div class="container">
<div class="piano">
<div class="octave">
<div class="key white C"></div><div class="key black C-sharp"></div><div class="key white D"></div><div class="key black D-sharp"></div><div class="key white E"></div><div class="key white F"></div><div class="key black F-sharp"></div><div class="key white G"></div><div class="key black G-sharp"></div><div class="key white A"></div><div class="key black A-sharp"></div><div class="key white B"></div>
</div><div class="octave">
<div class="key white C"></div><div class="key black C-sharp"></div><div class="key white D"></div><div class="key black D-sharp"></div><div class="key white E"></div><div class="key white F"></div><div class="key black F-sharp"></div><div class="key white G"></div><div class="key black G-sharp"></div><div class="key white A"></div><div class="key black A-sharp"></div><div class="key white B"></div>
</div><div class="octave">
<div class="key white C"></div><div class="key black C-sharp"></div><div class="key white D"></div><div class="key black D-sharp"></div><div class="key white E"></div><div class="key white F"></div><div class="key black F-sharp"></div><div class="key white G"></div><div class="key black G-sharp"></div><div class="key white A"></div><div class="key black A-sharp"></div><div class="key white B"></div>
</div>
</div>
</div>
SCSS
$size: 600px;
$numOctaves: 3;
$width-octave: $size / $numOctaves;
$width-key-white: $width-octave / 7;
$width-key-black: 0.6 * $width-key-white;
$height-key-white: 5 * $width-key-white;
$height-key-black: 0.6 * $height-key-white;
body {
background-color: #34495E;
}
.piano {
position: absolute;
top: 50%;
left: 50%;
width: $size;
height: $height-key-white;
transform: translate(-50%, -50%);
.octave {
position: relative;
display: inline-block;
.key {
display: inline-block;
border: 1px solid #aaa;
border-top: 2px solid #D24D57;
cursor: pointer;
}
.key.white {
width: $width-key-white;
height: $height-key-white;
background-color: white;
}
.key.black {
position: absolute;
width: $width-key-black;
height: $height-key-black;
background-color: black;
&.C-sharp {
left: $width-key-white - ($width-key-black / 2);
}
&.D-sharp {
left: 2 * $width-key-white - ($width-key-black / 2);
}
&.F-sharp {
left: 4 * $width-key-white - ($width-key-black / 2);
}
&.G-sharp {
left: 5 * $width-key-white - ($width-key-black / 2);
}
&.A-sharp {
left: 6 * $width-key-white - ($width-key-black / 2);
}
}
}
}
