如何将径向渐变更改为正方形

Question

如何将红色圆圈渐变为正方形？

这就是我想要在代码中做的所有事情。

这样可以吗？

https://jsfiddle.net/ub1nyfqj/

.test {
  width: 100px;
  height: 100px;
  background-image: radial-gradient(red 1px, transparent 1px),
    radial-gradient(red 1px, transparent 1px),
    linear-gradient(45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px),
    linear-gradient(-45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px);
  background-size: 10px 10px;
  background-position: 0 0, -5px -5px, 0 0, 0 0;
}

<div class="test"></div>

Answer 1

这可能不是您想要的，但我认为conic-gradient 可能是最适合您的解决方案。唯一的问题是这不会完全与您的网格对齐，但这是使用此方法的样子：

.test {
  width: 100px;
  height: 100px;
  background-image: conic-gradient(red 90deg, transparent 90deg 270deg),
  linear-gradient(45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px),
    linear-gradient(-45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px);
  background-size: 10px 10px;
  background-position: 0 0, -5px -5px, 0 0, 0 0;
}

<div class="test"></div>

我觉得如果这是你想要的，我觉得你绝对可以把它弄得更适合你的网格，但这应该会让你走上正确的轨道。

Answer 2

这样好像达到了效果。

https://jsfiddle.net/7zpr9htf/

.test {
  width: 100px;
  height: 100px;
  background-image:
    conic-gradient(red 9deg, transparent 0 180deg),
    conic-gradient(red 9deg, transparent 0 180deg),
    conic-gradient(red 9deg, transparent 0 180deg),
    conic-gradient(red 9deg, transparent 0 180deg),
    linear-gradient(45deg,

      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px),
    linear-gradient(-45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px);
  background-size: 10px 10px;
  background-position: 44px -11px, 15px -11px, 20px -6px, 9px -6px, -5px -5px, 0 0, 0 0;
}

<div class="test"></div>