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

jjhzyzn0 于 2023-01-10 发布在其他

关注(0)|答案(2)|浏览(129)

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

css

来源：https://stackoverflow.com/questions/68661520/creating-an-isometric-css-grid-as-my-section-background

2条答案

按热度按时间

zz2j4svz1#

使用背景图像，我们可以使用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>

赞(0）回复(0）举报 2023-01-10

t30tvxxf2#

更新了我之前的回答。

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

<body></body>

赞(0）回复(0）举报 2023-01-10

我来回答

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

2条答案

相关问题

热门标签

最新问答