【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;

最终就变成下面的效果了

完整代码在最上方。

本文来自企鹅号 - Rabbit媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏进击的君君的前端之路

CSS常见样式(一)

2883
来自专栏Spring相关

使用vue模拟购物车小球动画

1942
来自专栏一个爱吃西瓜的程序员

Web前端基础【2】--CSS基础

CSS指层叠样式表,用来定义如何显示HTML元素,一般和HTML配合使用。CSS样式表的目的是为了解决内容与表现分离的问题:即使同一个HTML文档也能表现出外观...

3526
来自专栏向治洪

css3动画从入门到精通

什么是css3动画? 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。 CSS3带来了圆角,半透明...

4036
来自专栏cnblogs

深入理解及应用Position

position俗称定位,主要取值及作用如下: static 默认值。没有定位,出现在正常文档流中 absolute 绝对定位,相...

2066
来自专栏代码世界

前端之CSS内容

一、CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。 当浏览器读到一个样式表,它就会按照这个样式表来对文档...

34210
来自专栏有趣的Python

安卓基础知识-layout布局详解。

安卓基础知识 1. 目录结构: src存放java源代码。 gen存放系统自动生成的配置文件 res存放应用用到的所有资源文件,如图片,布局等等 drawabl...

3205
来自专栏Android先生

Flutter组件学习(一)—— Text组件

之前说会给大家一一讲解 Flutter 中的组件,今天咱们就从 Text 组件开始,无图言X,先上图:

1822
来自专栏Python Web学习记录及整理

CSS学习记录及整理

<!DOCTYPE ”此文仅为个人学习的知识梳理,权威且更详细的内容请查阅w3school。“>

4458
来自专栏十月梦想

表格属性(特有)

       设置边框前提border-collapse取值为sparete(不合并),

993

扫码关注云+社区

领取腾讯云代金券