【CSS】红砖背景

学习委员

关注

发布于: 2021 年 01 月 23 日

二话不说先上图

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 层这种长方形，调整好相应的位置，就形成以上效果。

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

CSS 代码：

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;

复制代码

这时会得到下图的效果

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

CSS 代码：

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;

复制代码

发布于: 2021 年 01 月 23 日阅读数: 15

学习委员

关注

反派 2019.03.19 加入

哈哈哈哈哈哈哈哈哈哈哈哈哈哈

发布

暂无评论

创作场景

【CSS】红砖背景

学习委员

评论