是否可以使用HTML、CSS和JavaScript呈现非四边容器？

TL；博士是否可以使用非方形/四面HTML容器

我正在构建一个俄罗斯方块克隆，我已经完成了一个函数的构建，该函数将呈现单个俄罗斯方块，然而，当我考虑如何构建一个“碰撞”或网格定位系统时，我有一个想法：

（忽略图像中的边距）

有没有可能制作一个这样的容器（我们每天都能看到的以及我职业生涯中所见过的）：

有这样的边界：（用过的油漆，所以有点湿）

另外，使用JavaScript构建这样的游戏是我非常缺乏经验的，所以我相信这种构建和渲染tetrominoes的方法不会很好，但是如果我的问题可能的话，我仍然对我的答案感兴趣

而且，这并不是必需的，但我想我会分享我用来呈现tetrominoes风格的CSS：

/* 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);
}

---

这并不能直接回答您的问题，但为什么不分别渲染tetromino的每个方块呢。您还可以使用HTML画布构建游戏，而不是使用HTML元素。（除非这是一个你已经接受的挑战）这是一个更好的主意ROFL@PranavNachnekar