本文将介绍一个角向突变的一个十分有意思的小技巧！
咱们尝试应用 CSS 绘制如下图形：
在之前，相似的图案，其实咱们有尝试过，在 单标签实现简单的棋盘布局 一文中，咱们用单标签实现了这样一个棋盘布局：
那么，本文有什么非凡之处呢？让咱们一探到底。
疾速实现网格布局
首先，上述的布局还是心愿应用一个标签实现，这个没有问题。
利用 突变是能够多层的 这个个性，咱们疾速实现页面的网格形态，假如咱们的构造如下：
<div></div>div { margin: auto; width: 500px; height: 500px; background: repeating-linear-gradient(90deg,#aec8ee 0, #aec8ee 1px, transparent 1px, transparent 100px), repeating-linear-gradient(#aec8ee 0, #aec8ee 1px, transparent 1px, transparent 100px), #0e284d;}利用两层反复线性突变，咱们能够疾速的失去这样一个图案：
有了这样一个网格之后，剩下要解决的就是如何绘制一个一个的小十字：
在棋盘布局中，咱们尝试过应用多重 box-shadow 实现相似的图案。
本文，咱们将尝试应用角向突变，疾速实现这个图形！
角向突变的技巧
在此之前，咱们先来学习角向突变的这个技巧。
角向突变，也就是 conic-gradient，对它还比拟生疏的，能够先看看我的这篇文章 -- 神奇的 conic-gradient 角向突变。
举个例子：
{ background: conic-gradient(deeppink, yellowgreen);}从突变的圆心、突变起始角度以及突变方向上来说，是这样的：
划重点：
从图中能够看到，角向突变的起始圆心点、起始角度和突变方向为：
- 起始点是图形核心，
- 默认突变角度 0deg 是从上方垂直于圆心的
- 突变方向以顺时针方向绕核心实现
当然，咱们也能够管制角向突变的起始角度以及角向突变的圆心。
略微改一下上述代码：
{ background: conic-gradient(from 270deg at 50px 50px, deeppink, yellowgreen);}成果如下：
咱们扭转了起始角度以及角向突变的圆心：
理解了这个之后。咱们基于上述的图形，从新绘制一个图形：
div { margin: auto; width: 200px; height: 200px; background: conic-gradient(from 270deg at 50px 50px, deeppink 0%, deeppink 90deg, transparent 90deg, transparent 360deg); border: 1px solid #000;}成果如下：
起始角度以及角向突变的圆心没有扭转，然而只让前 90deg 的图形为粉色，而后 270deg 的图形，设置为了通明色。
咱们利用角向突变，在图像外部，又实现了一个小的矩形！
接下来，咱们再给上述图形，减少一个 background-position: -25px, -25px：
div { margin: auto; width: 200px; height: 200px; background: conic-gradient(from 270deg at 50px 50px, deeppink 0%, deeppink 90deg, transparent 90deg, transparent 360deg); background-position: -25px -25px; border: 1px solid #000;}这样，咱们就神奇的失去了这样一个图形：
为什么会有这样一种景象？如果咱们在代码中退出 background-repeat: no-repeat：
div { margin: auto; width: 200px; height: 200px; background: conic-gradient(from 270deg at 50px 50px, deeppink 0%, deeppink 90deg, transparent 90deg, transparent 360deg); background-position: -25px -25px; background-repeat: no-repeat; border: 1px solid #000;}那么就只会剩下左上角一个角：
因而，这里实际上利用了突变图形默认会 repeat 的个性，实际上是这么个意思：
了解了这张图，也就了解了整个技巧的外围所在！
了解上述技巧实现图形加号
了解了上述技巧，咱们再回到咱们须要实现的图形中，利用多两层角向突变，咱们就能失去咱们想要的图形。
第一层：
div { background: conic-gradient(from 270deg at 5px 20px, #31c2ec 90deg, transparent 0deg), repeating-linear-gradient(90deg,#aec8ee 0, #aec8ee 1px, transparent 1px, transparent 100px), repeating-linear-gradient(#aec8ee 0, #aec8ee 1px, transparent 1px, transparent 100px), #0e284d; background-repeat: repeat, no-repeat, no-repeat; background-size: 100px 100px, 100% 100%, 100% 100%; background-position: -2.5px -10px, 0 0, 0 0;}成果如下：
这里咱们做了什么呢？咱们新增的突变在最上层，也就是第一层突变：
background-size: 100px 100px将整个页面切割成多份100px x 100px的方格- 利用角向突变实现了一个矩形图案
- 利用了上述技巧，外围是
background-position: -2.5px -10px将矩形图案显示在了大小为100px x 100px的方格的四个角
第二层角向突变叠加，如法炮制即可：
div { background: conic-gradient(from 270deg at 20px 5px, #31c2ec 90deg, transparent 0deg), conic-gradient(from 270deg at 5px 20px, #31c2ec 90deg, transparent 0deg), repeating-linear-gradient(90deg,#aec8ee 0, #aec8ee 1px, transparent 1px, transparent 100px), repeating-linear-gradient(#aec8ee 0, #aec8ee 1px, transparent 1px, transparent 100px), #0e284d; background-repeat: repeat, repeat, no-repeat, no-repeat; background-size: 100px 100px, 100px 100px, 100% 100%, 100% 100%; background-position: -10px -2.5px, -2.5px -10px, 0 0, 0 0;}这样，咱们就完满的实现了咱们须要的图形成果：
残缺的代码，你能够戳这里：CodePen Demo -- Conic Gradient Skill Demo
总结一下，本文介绍了利用角向突变 conic-gradient 的 position 的小技巧，组合实现了看似很简单的网格布局图案。
最初
好了，本文到此结束，心愿本文对你有所帮忙 :)
想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 -- iCSS前端趣闻
更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ，继续更新，欢送点个 star 订阅珍藏。
如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。