javascript / jquery css динамически превращает элементы списка в трапеции и заполняет экран

Question

У меня есть проект, который требует нескольких рядов трапеций. Есть 10 трапеций в ряд, которые вписываются друг в друга, чтобы заполнить ширину экрана. как показывает код, приведенный ниже.

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

Мой требуемый результат: блоки должны просто касаться друг друга и заполнять экран от одного конца до другого. это также должно заполнить любой размер экрана.

Вот мой код:

function makewide(id, q) {
  var w = jQuery(window).width();
  var h = jQuery(window).height() / 2;
  var rh = h / 3;
  var k = jQuery('#' + id + ' >li.trapezium').length;
  var kw = w / k;
  var bd = kw / 2;
  var sq = Math.sqrt(kw);
  var dg = kw + sq;
  var nh = dg / 2;
  jQuery('#' + id).css('height', nh + 'px');
  var i = 0;
  jQuery('#' + id + ' >li').each(function() {
    var t = jQuery(this);
    t.css('width', kw + 'px').css('height', kw + 'px');
    if (q == 1) {
      if (i % 2 == 0) {
        t.css('top', '-' + bd + 'px');
        t.find('div.letter').css('padding-top', bd + 'px');
        t.find('div.letter').addClass('odd');
      } else {
        t.css('top', '0px');
        t.find('div.letter').css('padding-top', '0px');
        t.find('div.letter').addClass('even');
      }
    } else {
      if (i % 2 == 0) {
        t.css('top', '0px');
        t.find('div.letter').css('padding-top', '0px');
        t.find('div.letter').addClass('even');
      } else {
        t.css('top', '-' + bd + 'px');
        t.find('div.letter').css('padding-top', bd + 'px');
        t.find('div.letter').addClass('odd');
      }
    }
    i++;
  })
}

setTimeout(function() {
  makewide('row1', 1);
  makewide('row2', 0);
  makewide('row3', 1);
  makewide('row4', 0);
}, 200);

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

* {
  box-sizing: border-box;
  list-style-type: none;
}

ul {
  display: flex;
}

ul.cover {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}

ul#row1>li,
ul#row2>li,
ul#row3>li,
ul#row4>li {
  display: inline-flex;
  border: 1px solid #000;
  box-shadow: 0 -1px 3px rgba(190, 255, 255, 0.5), 2px 3px 3px rgba(0, 0, 0, 0.2), 0 -1px 1px rgba(0, 0, 0, 0.5) inset, 0 1px 1px rgba(255, 255, 255, 1) inset;
  overflow: hidden;
  transform-origin: center center;
  transform: rotate(45deg);
  position: relative;
}

ul#row2,
#row3,
#row4 {
  border-top: 1px solid #000;
}

ul li:nth-child(odd) {
  background-color: lightblue;
  top: -50px;
  left: 0;
}

ul li:nth-child(even) {
  background-color: grey;
  top: 0px;
  left: 0;
}

.letter {
  box-sizing: border-box;
  color: white;
  display: block;
  font-size: 4em;
  height: 100%;
  text-align: center;
  vertical-align: middle;
  width: 100%;
}

.letter.odd {
  transform: rotate(-45deg);
}

.letter.even {
  transform: rotate(-45deg);
}

body,
html {
  height: 100%;
}

body {
  background-color: #3d9970;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="cover" id="row1">
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
</ul>

<ul class="cover" id="row2">
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
</ul>

<ul class="cover" id="row3">
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
</ul>

<ul class="cover" id="row4">
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
  <li class="trapezium">
    <div class="letter">A</div>
  </li>
</ul>

, как вы можете видеть, это близко, но что-то не так и пробелы разрушают все