如何用纯CSS打造个性格子背景？

本文共计920个文字，预计阅读时间需要4分钟。

原文简介：本次学习会使用CSS绘制一个格子背景。逐步分析如何实现，思路如下，直接给出答案：

收集+关注=学会+这次会使用CSS绘制一个格子背景。逐步分析如何实现，思路如下，直接给出答案：

通两个等边的直角三角形拼接，形成一个正方形。三角形可以使用CSS的border样式绘制。具体步骤如下：

1. 定义一个正方形容器，设置宽高为100px，边框样式为1px solid #000；

2.在容器内部创建两个直角三角形，分别设置宽高为50px和100px；

3.调整三角形的边框样式，使其形成拼接效果；

4.将两个三角形放置在正方形容器的两侧，即可形成一个正方形背景。

本文简介

点赞 + 收藏 + 关注 = 学会了

这次会使用css画出一个格子背景。并且一步步分析如何实现~

思路

直接给答案：通过2个相等的直角三角形拼接，形成一个正方形。

三角形可以使用 background-image 的渐变来实现。