使用 conic-gradient() 制作的 Square 没有出现在 Firefox 中，但在 Chrome 中工作正常。解决方法是什么？

Question

在 Chrome 和 Firefox 中尝试运行以下代码：

<!DOCTYPE html>
<html>
    <style>
        div {
            height: 60px;
            width:60px;
            background: conic-gradient(
                #ffde15 0% 12.5%,
                #27abfd 12.5% 37.5%,
                #eb1c22 37.5% 62.5%,
                #06a049 62.5% 87.6%,
                #ffde15 87.6% 100%
            );
        }
    </style>

    <body>
        <div></div>
    </body>
</html>

在 Chrome 中，它工作正常并产生类似 this 的结果，但在 Firefox 中没有显示。

在 Firefox 中，我们可以访问 about:config 并启用 layout.css.conic-gradient.enabled，但我需要一个适当的解决方法。

你能帮我画出在 Chrome 和 Firefox 中都有效的正方形吗？

Answer 1

如果您只想在正方形内创建这样的彩色三角形。您可以修改现有正方形的边框属性，然后用您想要的颜色对其进行着色。为您提供 cross-browser 支持。

所以你的最终代码应该是这样的：

<!DOCTYPE html>
<html>
<style>
  div {
    width: 0px;
    height: 0px;
    border: 30px solid;
    border-top-color: #ffde15;
    border-left-color: #06a049;
    border-right-color: #27abfd;
    border-bottom-color: #eb1c22;
  }
</style>

<body>
  <div></div>
</body>

</html>

注意：如果您想知道它到底是如何工作的，this article可能会有用。

Answer 2

linear-gradient 可以用 clip-path

完成这里的工作

.box {
  height: 60px;
  width: 60px;
  background: linear-gradient(to top right, #27abfd 50%, #ffde15 0);
}

.box::before {
  content: "";
  display: block;
  height: 100%;
  background: linear-gradient(to top right, #eb1c22 50%, #06a049 0);
  clip-path:polygon(0 0,100% 0,0 100%);
}

<div class="box"></div>

另一个带旋转的解决方案：

.box {
  height: 60px;
  width: 60px;
  overflow:hidden;
}

.box::before {
  content: "";
  display: block;
  height: 141.42%; /* 100% * sqrt(2) */
  width:141.42%;
  margin:-20.52% 0 0 -20.52%; /* 50% * (sqrt(2) - 1)*/
  background: 
    linear-gradient(#eb1c22 50%, #06a049 0) left,
    linear-gradient(#27abfd 50%, #ffde15 0) right;
  background-size:50% 100%;
  background-repeat:no-repeat;
  transform:rotate(45deg);
}

<div class="box"></div>

使用 conic-gradient() 制作的 Square 没有出现在 Firefox 中，但在 Chrome 中工作正常。解决方法是什么？

Square made using conic-gradient() is not showing up in Firefox but working fine in Chrome. What is the workaround?

html

css

firefox