003-CSS-斑马线&棋盘效果

斑马线布局效果

💡 Tips：通过 linear-gradient 配合 background 属性实现

.zebra-crossing {
  width: 500px;
  height: 300px;
  border: 1px solid #ccc;
  background-image: linear-gradient(to right, #fff 0%, #fff 50%, #999 50%, #999 100%);
  background-size: 50px 100%;
}
1
2
3
4
5
6
7

实现效果图如下：

棋盘布局效果

💡 Tips：background-position 控制绘制位置，linear-gradient 控制绘制内容

/*
  灰色模块，通过绘制 4 个三角形，形成 两个成对角的正方形
*/
.checkerboard {
  margin-top: 20px;
  width: 500px;
  height: 300px;
  border: 1px solid #ccc;
  background-image:
    linear-gradient(45deg, #ccc 25%, transparent 0),
    linear-gradient(45deg, transparent 75%, #ccc 0),
    linear-gradient(45deg, #ccc 25%, transparent 0),
    linear-gradient(45deg, transparent 75%, #ccc 0);
  background-position: 0 0, -15px 15px, 15px -15px, 30px 30px;
  background-size: 30px 30px;
  background-color: white;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

实现效果图如下：