如何使用纯Vanilla CSS生成菱形渐变效果？

当然可以，CSS虽然没有专门的diamond-gradient属性，但借助conic-gradient配合CSS变换或裁剪就能实现你想要的菱形辐射渐变效果。

以下是两种实用实现方案：

方案一：使用clip-path裁剪菱形 #

.diamond-gradient {
  width: 200px;
  height: 200px;
  /* 创建环形渐变，起始角度调整为45度匹配菱形方向 */
  background: conic-gradient(from 45deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
  /* 旋转渐变方向 */
  transform: rotate(45deg);
  /* 裁剪出菱形形状 */
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

方案二：利用容器溢出隐藏实现菱形 #

.gradient-container {
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.diamond-gradient {
  /* 尺寸设为容器的√2倍，确保旋转后完全覆盖容器 */
  width: 283px;
  height: 283px;
  background: conic-gradient(from 45deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
  /* 旋转并平移，让渐变中心与容器中心对齐 */
  transform: rotate(45deg) translate(-29%, -29%);
}

两种方案都能还原目标图案的渐变效果，核心是通过conic-gradient生成基础环形渐变，再通过CSS调整形状和方向，模拟出菱形辐射的视觉效果。

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