【CSS】格仔背景

CSS代码

* {

margin: 0;

padding: 0;

}

html, body {

width: 100%;

height: 100%;

}

body {

background: #fff;

background-image:

linear-gradient(45deg, #000 25%, transparent 0, transparent 75%, #000 0),

linear-gradient(45deg, #000 25%, transparent 0, transparent 75%, #000 0);

background-position: 0 0, 15px 15px;

background-size: 30px 30px;

}

主要通过background-image的渐变来实现这种效果。

用2个三角形合并成一个正方形。

详解

background: #fff;

首先设置background#fff,让背景色变成纯白色(也可以设置成别的颜色)。

background-image:linear-gradient(45deg, #000 25%, transparent 0);

做一个45度的线性渐变,第一个颜色是#000(黑色),占整个背景贴片的25%,其余部分都是透明。

可以看到下图效果。

这时,用background-size来控制背景贴片的大小。

background-size: 30px 30px;

可以看到以下效果。

如果我们把黑色从25%变成75%,会看到以下效果。

我们可以看到,白色三角形其实就是transparent所覆盖的地方,角度和之前25%的黑色三角形是相反的。

如果我们把上图的“白色三角形”变成黑色,原本的黑色三角形(25%)继续保留。会变成下图效果。

background-image:

linear-gradient(45deg, #000 25%, transparent 0),

linear-gradient(45deg, transparent 75%, #000 0);

简化一下代码:

background-image:

linear-gradient(45deg, #000 25%, transparent 0, transparent 75%, #000 0);

最后再做多一层上面的效果,然后移动一下其中一层的位置,就可以合并成一个黑色正方形。

background-image:

linear-gradient(45deg, #000 25%, transparent 0, transparent 75%, #000 0),

linear-gradient(45deg, #000 25%, transparent 0, transparent 75%, #000 0);

background-position: 0 0, 15px 15px;

最终就变成下面的效果了

完整代码在最上方。

相关内容

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20171219G0QW5Y00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券