创建等距 CSS 网格作为我的部分背景

Question

我想创建一个微妙的等距 CSS 网格作为我的英雄部分的背景。与此类似的东西：https://image.shutterstock.com/image-vector/isometric-grid-black-template-your-260nw-1546251851.jpg 但没有垂直线运行穿过网格。有人知道我该怎么做吗？

Answer 1

使用 background-image 我们可以使用 css.

实现背景网格

body{
    background-color: #fff;
    background: repeating-linear-gradient(
150deg
, #ccc, #bbb 2px, transparent 1px, transparent 40px) , repeating-linear-gradient(
30deg
, #ccc, #BBB 1px, transparent 2px, transparent 40px);
    background-size: 81px 46px;
}

<body></body>

创建等距 CSS 网格作为我的部分背景

Creating an isometric CSS grid as my section background

css

background