如何在 CSS 和 HTML 中创建这个 80 年代的背景？

Question

我想问一下如何仅使用html和CSS创建80个背景？

我试过这样做，但得到了这个结果：

 .bottom-background {
        background-size: 100px 100px;
        background-image: linear-gradient(to right, green 2px, transparent 2px), linear-gradient(to bottom, green 2px, transparent 2px);
        width: 100%;
        height: 50vh;
        bottom: 0;
        position: absolute;
        perspective: 20px;
        transform: rotateX(45deg);
    }

<div class="bottom-background"></div>

我想像第一张图片一样居中。

Answer 1

您需要组合转换才能获得此效果，我使用了：

transform: perspective(400px) rotateX(70deg) scale(2);

在perspective()只有当与彼此组合变换的效果，在这种情况下变换rotateX()。该scale()转换是确保整个转化图形充满屏幕。我调整了边框渐变以补偿比例加倍。

transform: perspective(400px) rotateX(70deg) scale(2);

body { margin: 0; }

.perspective-container {
  overflow: hidden; /* so we dont get any undesired scrolling in the browser window */
}

.bottom-background {
  background-size: 20px 20px;
  background-image: linear-gradient(to right, green 1px, transparent 1px), linear-gradient(to bottom, green 1px, transparent 1px);
  width: 100%;
  height: 50vh;
  bottom: 0;
  position: absolute;
  
  transform: perspective(400px) rotateX(70deg) scale(2);
}