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

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>