【CSS】红砖背景

最新推荐文章于 2024-03-14 17:16:26 发布

原创最新推荐文章于 2024-03-14 17:16:26 发布 · 155 阅读

0 ·

CC 4.0 BY-SA版权

image.png

CSS代码：

* {
    margin: 0;
    padding: 0;
}
html, body {
    width: 100%;
    height: 100%;
}
body {
    background-color: white;
    background-image: 
        linear-gradient(335deg, #b00 23px, transparent 0),
        linear-gradient(155deg, #d00 23px, transparent 0),
        linear-gradient(335deg, #b00 23px, transparent 0),
        linear-gradient(155deg, #d00 23px, transparent 0);
    background-position: 0px 0px, 4px 33px, 30px 29px, 34px 4px;
    background-size: 58px 58px;
}

感谢Lea Verou免费分享上图效果，我在她的CSS库里面找到这个效果的代码，然后自己改良了一下。

下面详细分析。

如果看得懂【CSS】格仔背景的话，理解这次这种效果就会更容易了。

主要是通过两个不同颜色的三角形，合成一个长方形。再通过做2层这种长方形，调整好相应的位置，就形成以上效果。

image.png

画2个不同颜色的三角形，把下面三角形分别往上和往左移动一点点。

  background-image: 
        linear-gradient(335deg, #b00 23px, transparent 0),
        linear-gradient(155deg, #d00 23px, transparent 0),
    background-position: 0px 0px, 4px 33px;
    background-size: 58px 58px;
}

这时会得到下图的效果

image.png

会看到行距比较大。所以需要再画一层同样的红砖，调整“新红砖层”的位置。

 background-image: 
        linear-gradient(335deg, #b00 23px, transparent 0),
        linear-gradient(155deg, #d00 23px, transparent 0),
        <!-- 新层 -->
        linear-gradient(335deg, #b00 23px, transparent 0),
        linear-gradient(155deg, #d00 23px, transparent 0);
    
    <!-- 最后的 30px 29px, 34px 4px 是对新层的定位>
    background-position: 0px 0px, 4px 33px, 30px 29px, 34px 4px;
    background-size: 58px 58px;