CSS创意与视觉表现

效果

代码

CSS代码：

.square {
    display: inline-block;
    padding: 300px;
    background-color: #fff;
    background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}

HTML代码：

<div class="square"></div>

原理

1. 下面两个图形错位叠加后的效果。

2. 下面是若干图形平铺状态下的叠加效果。