如何修改CSS linear-gradient代码为正方形渐变中间添加4种颜色

你现有代码最后两行渐变的作用是绘制中间区域的横向分隔线，中间85px*85px的区域没有填充色所以显示为空白，只需要在background-image属性的所有原有渐变条目末尾，追加中间区域的渐变定义即可。

以下是两种常用效果的实现代码：

方案1：2x2矩形色块效果 #

追加以下代码到background-image列表末尾，颜色可按需替换：

linear-gradient(#f00, #f00) calc(50% - 42.5px) calc(50% - 42.5px) / 42.5px 42.5px no-repeat,
linear-gradient(#ff0, #ff0) 50% calc(50% - 42.5px) / 42.5px 42.5px no-repeat,
linear-gradient(#00f, #00f) calc(50% - 42.5px) 50% / 42.5px 42.5px no-repeat,
linear-gradient(#0f0, #0f0) 50% 50% / 42.5px 42.5px no-repeat

方案2：四等分三角形色块效果 #

如果要实现对角三角拼合的四色效果，追加以下代码即可：

conic-gradient(#f00 0 90deg, #ff0 90deg 180deg, #0f0 180deg 270deg, #00f 270deg 360deg) center / 85px 85px no-repeat

注意：CSS background-image的图层顺序为先定义的在上、后定义的在下，因为你原有渐变的中间区域都是透明的，所以新增的底部渐变可以正常显示。

内容的提问来源于stack exchange，提问作者user16466354