javascript - 是否可以使用 HTML、CSS 和 JavaScript 呈现非 4 面容器？

Question

TL;博士; 是否有可能有一个非方形/4 面的 HTML 容器？

我正在构建一个俄罗斯方块克隆，并且我已经完成了一个可以渲染单个四联骨牌的函数，但是，当我正在考虑如何构建一个“碰撞”或网格定位系统时，我有一个想法：

（忽略图像中的边距）

是否可以制作这样的容器（我们每天看到的以及我在职业生涯中看到的所有内容）：

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

此外，使用 JavaScript 构建这样的游戏是我非常缺乏经验的东西，所以我相信这种构建和渲染四联骨牌的方法效果不佳，但我仍然会对我的答案感兴趣如果我的问题是可能的。

而且，并不是说它是必需的，但我想我会分享我用来渲染四联骨牌样式的 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);
}

标签： javascripthtmlcss