Как разбить шестиугольник на несколько кнопок в HTML / CSS / JS?

Question

Я создаю приложение wep для клиента с определенным требованием для формы кнопки .

Клиенту нужен отзывчивый список кнопок, инкапсулированных в шестиугольник , как в примере на следующем рисунке.

Каждая кнопка является трапецией (кроме одной вв середине), но мои знания о формах CSS близки к нулю.

Пример формы кнопок https://i.imgur.com/46Ess2I.png

Пока я нашел, как нарисоватьшестиугольник и кнопка в форме трапеции (в соответствии с CSS-кодом), но я не знаю, как их можно смешать в удобной и отзывчивой форме.

Код для кнопки трапеции:

.trapezoid {
  width: 230px;
  text-align: center;
  height: 0; 
  position: relative;
  border-right: 50px solid transparent;
  border-top: 40px solid #2963BD;
  border-left: 50px solid transparent;
  box-sizing: content-box;
}

Код для шестиугольника

.hexagon
{   overflow: hidden;
    visibility: hidden;
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    transform: rotate(120deg);
    cursor: pointer;
}

Буду признателен за любую помощь или отправную точку, спасибо!