Original address:https://segmentfault.com/a/1190000022984416

Author:FW Dragon

This article is published in:Do you think about itForeword: in the process of front-end project development, sometimes some backgrounds are obtained by simple changes (such as translation and rotation) of some regular graphics. The usual way is to cut a repeatable picture and set it as the background image. With the popularity of CSS3, the linear gradient and radial gradient properties have been well supported It can simulate many background textures, such as stripes, dots and squares. So we try to use these two attributes to draw some scenes that can replace the pictures. In the process of drawing, I suddenly thought of the maze square texture in my world. At that time, Tauren always thought this texture was very good-looking (below), so I tried to use CSS to draw this texture.

## 1、 Analyze texture

It can be found that the smallest unit of this texture is shown in the figure below, and a tile texture can be obtained by rotating three times.

## 2、 Drawing texture cells

If you subdivide, you can actually split the cell into half and rotate it 180 degrees to get the smallest cell at present, so it’s not so complicated. At present, the smallest cell is 8 * 8 cells. First consider drawing the first row.

` <div class="item"></div>`

As the location image address has more calculation, the following uses the stylus preprocessor, which is also convenient for texture color adjustment.

```
bp($w)
$s = ''
for i in (1..8)
if(i != 8)
$s = $s + '0' + ' ' + p2r(0.125 * (i - 1) * $w) + ','
else
$s = $s + '0' + ' ' + p2r(0.125 * (i - 1) * $w)
return unquote($s)
.item
$c1 = #738073
background-color $c1
$c2 = #747475
$w = 100px
width $w
height $w
background-image linear-gradient(90deg, $c2 37.5%, $c1 37.5%, $c1 50%, $c2 50%, $c2 62.5%, $c1 62.5%, $c1 75%, $c2 75%, $c2 87.5%, $c1 87.5%, $c1 100%)
background-size $w 0.125*$w
background-position bp($w)
background-repeat no-repeat
```

The remaining seven lines are the same

```
background-image linear-gradient(90deg, $c2 37.5%, $c1 37.5%, $c1 50%, $c2 50%, $c2 62.5%, $c1 62.5%, $c1 75%, $c2 75%, $c2 87.5%, $c1 87.5%, $c1 100%),
linear-gradient(90deg, $c2 37.5%, $c1 37.5%, $c1 50%, $c2 50%, $c2 62.5%, $c1 62.5%, $c1 75%, $c2 75%, $c2 100%),
linear-gradient(90deg, $c2 25%, $c1 25%, $c1 37.5%, $c2 37.5%, $c2 62.5%, $c1 62.5%),
linear-gradient(90deg, $c1 25%, $c2 25%, $c2 50%, $c1 50%, $c1 62.5%, $c2 62.5%),
linear-gradient(90deg, $c2 37.5%, $c1 37.5%, $c1 50%, $c2 50%, $c2 75%, $c1 75%),
linear-gradient(90deg, $c1 37.5%, $c2 37.5%, $c2 62.5%, $c1 62.5%, $c1 75%, $c2 75%),
linear-gradient(90deg, $c2 25%, $c1 25%, $c1 37.5%, $c2 37.5%, $c2 50%, $c1 50%, $c1 62.5%, $c2 62.5%, $c2 100%),
linear-gradient(90deg, $c1 12.5%, $c2 12.5%, $c2 25%, $c1 25%, $c1 37.5%, $c2 37.5%, $c2 50%, $c1 50%, $c1 62.5%, $c2 62.5%)
```

The above only pasted the key code, the specific code details can be viewed

## 3、 Other textures, the following is a screenshot of the effect on IOS and Android (incomplete test)

## 4、 Another way of drawing image

You can use the box shadow attribute to draw a pixel map