Можно ли визуализировать не 4-сторонний контейнер с HTML, CSS и JavaScript?

Question

TL; DR; Возможно ли иметь неквадратный / 4-сторонний контейнер HTML?

Я создаю клон Тетриса, и я закончил создание функции, которая будет отображать отдельные тетромино, однако, поскольку я Подумываю, как построить "коллизионную" или систему позиционирования по сетке, у меня возникла мысль:

(игнорировать поля в изображениях)

Можно ли сделать такой контейнер (то, что мы видим каждый день, и все, что я когда-либо видел в своей карьере):

имеют такие границы: (использовал Paint, так что это немного мах)

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

И не то, чтобы это было необходимо, но я решил, что поделюсь CSS I Использую для рендеринга стиль тетромино:

/* Sizes Variables */
:root {
  --tetromino-block-size: 30px;
}

.Tetromino {
  overflow: hidden;
  margin-bottom: var(--tetromino-block-size);
  position: relative;
}

.Tetromino--grid {
  height: calc(var(--tetromino-block-size) * 2);
  width: 40px;
}

/* 1x4 */
.Tetromino--i {
  height: var(--tetromino-block-size);
  width: calc(var(--tetromino-block-size) * 4);
}

/* 3x2 */
.Tetromino--j {
  height: calc(var(--tetromino-block-size) * 2);
  width: calc(var(--tetromino-block-size) * 3);
}

/* 3x2 */
.Tetromino--l {
  height: calc(var(--tetromino-block-size) * 2);
  width: calc(var(--tetromino-block-size) * 3);
}

/* 2x2 */
.Tetromino--o {
  height: calc(var(--tetromino-block-size) * 2);
  width: calc(var(--tetromino-block-size) * 2);
}

/* 3x2 */
.Tetromino--s {
  height: calc(var(--tetromino-block-size) * 2);
  width: calc(var(--tetromino-block-size) * 3);
}

/* 3x2 */
.Tetromino--t {
  height: calc(var(--tetromino-block-size) * 2);
  width: calc(var(--tetromino-block-size) * 3);
}

/* 3x2 */
.Tetromino--z {
  height: calc(var(--tetromino-block-size) * 2);
  width: calc(var(--tetromino-block-size) * 3);
}

/* width: 9/10 variable block size; border: 1/10 variable block size */
.Tetromino__block {
  border: calc(var(--tetromino-block-size) / 10) inset black;
  height: calc(var(--tetromino-block-size) - calc(var(--tetromino-block-size) / 5));
  position: absolute;
  width: calc(var(--tetromino-block-size) - calc(var(--tetromino-block-size) / 5));
}

.Tetromino__block[quadrant=Q1A] {
  left: calc(var(--tetromino-block-size) * 2);
  top: 0;
}

.Tetromino__block[quadrant=Q1B] {
  left: calc(var(--tetromino-block-size) * 3);
  top: 0;
}

.Tetromino__block[quadrant=Q2A] {
  left: var(--tetromino-block-size);
  top: 0;
}

.Tetromino__block[quadrant=Q2B] {
  left: 0;
  top: 0;
}

.Tetromino__block[quadrant=Q3A] {
  left: var(--tetromino-block-size);
  top: var(--tetromino-block-size);
}

.Tetromino__block[quadrant=Q3B] {
  left: 0;
  top: var(--tetromino-block-size);
}

.Tetromino__block[quadrant=Q4A] {
  left: calc(var(--tetromino-block-size) * 2);
  top: var(--tetromino-block-size);
}

.Tetromino__block[quadrant=Q4B] {
  left: calc(var(--tetromino-block-size) * 3);
  top: var(--tetromino-block-size);
}