有没有办法在没有任何其他元素的情况下为 div 提供类似“矩形”或“菱形”的渐变效果？

Question

如何在 div 背景中指定渐变以实现以下视觉效果？

我能够用 4 个 div 实现外观，但无法提出只有一个 div及其使用渐变的背景属性的解决方案。

我认为即使使用 before 伪元素也是不可能的。

以下是我尝试过的想法，这清楚地表明可以使用 4 个具有线性渐变的 div：

下面是上面例子的代码：

#box1 {
  background-image: linear-gradient(225deg, #FF1794 0%, #FFF037 14.81%, #39ED94 27.72%, #00B0EC 50.23%, #FF1794 67.56%, #FFF037 81.76%, #39ED94 100%);
  width: 107px;
  height: 116px;
  left: 228px;
  top: 335px;
  position: absolute;
  transform:rotate(-45deg);
}

#box2 {
  background-image: linear-gradient(-45deg, #FF1794 0%, #FFF037 14.81%, #39ED94 27.72%, #00B0EC 50.23%, #FF1794 67.56%, #FFF037 81.76%, #39ED94 100%);
  width: 107px;
  height: 116px;
  left: 308px;
  top: 415px;
  position: absolute;
  transform:rotate(-45deg);
}

#box3 {
  background-image: linear-gradient(135deg, #FF1794 0%, #FFF037 14.81%, #39ED94 27.72%, #00B0EC 50.23%, #FF1794 67.56%, #FFF037 81.76%, #39ED94 100%);
  width: 107px;
  height: 114px;
  left: 153px;
  top: 410px;
  position: absolute;
  transform:rotate(-45deg);
}

#box4 {
  background-image: linear-gradient(45deg, #FF1794 0%, #FFF037 14.81%, #39ED94 27.72%, #00B0EC 50.23%, #FF1794 67.56%, #FFF037 81.76%, #39ED94 100%);
  width: 107px;
  height: 115px;
  left: 234px;
  top: 490px;
  position: absolute;
  transform:rotate(-45deg);
}

<div style="position:relative; top:-300px;left:-100px">
  <div id="box1">
    <!-- -->
  </div>
  <div id="box2">
    <!-- -->
  </div>
  <div id="box3">
    <!-- -->
  </div>
  <div id="box4">
    <!-- -->
  </div>
</div>

Answer 1

对于第二个，您可以简单地使用多个渐变在每个角落创建 4 个背景。您可能会注意到颜色应停止在 50% 或更少，因为技巧是具有一种三角形形状。

.box {
  margin:5px;
  width:300px;
  height:200px;
  background:
   linear-gradient(to bottom right,#FF1794 0%, #FFF037 7.41%, #39ED94 13.72%, #00B0EC 25.23%, #FF1794 34.56%, #FFF037 40.76%, #39ED94 50%) bottom right,
   linear-gradient(to bottom left, #FF1794 0%, #FFF037 7.41%, #39ED94 13.72%, #00B0EC 25.23%, #FF1794 34.56%, #FFF037 40.76%, #39ED94 50%) bottom left,
   linear-gradient(to top left,    #FF1794 0%, #FFF037 7.41%, #39ED94 13.72%, #00B0EC 25.23%, #FF1794 34.56%, #FFF037 40.76%, #39ED94 50%) top left,
   linear-gradient(to top right,   #FF1794 0%, #FFF037 7.41%, #39ED94 13.72%, #00B0EC 25.23%, #FF1794 34.56%, #FFF037 40.76%, #39ED94 50%) top right;
   
  background-size:50% 50%;
  background-repeat:no-repeat;
}

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

对于第一个，您可以考虑伪元素和clip-path。伪元素将在相反方向与主元素具有相同的渐变，然后clip-path从每边切割两个三角形：

.box {
  margin:5px;
  width:300px;
  height:200px;
  background:
   linear-gradient(to right, #FF1794 0%, #FFF037 14.81%, #39ED94 27.72%, #00B0EC 50.23%, #FF1794 67.56%, #FFF037 81.76%, #39ED94 100%) right,
   linear-gradient(to left,  #FF1794 0%, #FFF037 14.81%, #39ED94 27.72%, #00B0EC 50.23%, #FF1794 67.56%, #FFF037 81.76%, #39ED94 100%) left;
   
  background-size:50% 100%;
  background-repeat:no-repeat;
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  background:
   linear-gradient(to bottom,#FF1794 0%, #FFF037 14.81%, #39ED94 27.72%, #00B0EC 50.23%, #FF1794 67.56%, #FFF037 81.76%, #39ED94 100%) bottom,
   linear-gradient(to top,   #FF1794 0%, #FFF037 14.81%, #39ED94 27.72%, #00B0EC 50.23%, #FF1794 67.56%, #FFF037 81.76%, #39ED94 100%) top;
  background-size:100% 50%;
  background-repeat:no-repeat;
  top:0;
  bottom:0;
  right:0;
  left:0;
  -webkit-clip-path: polygon(0% 0%, 50% 50%, 0% 100%, 100% 100%, 50% 50%, 50% 50%, 100% 0%);
  clip-path: polygon(0% 0%, 50% 50%, 0% 100%, 100% 100%, 50% 50%, 50% 50%, 100% 0%);
}

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

移动伪元素，你就会清楚地理解这个技巧：

.box {
  margin:5px;
  width:300px;
  height:200px;
  background:
   linear-gradient(to right, #FF1794 0%, #FFF037 14.81%, #39ED94 27.72%, #00B0EC 50.23%, #FF1794 67.56%, #FFF037 81.76%, #39ED94 100%) right,
   linear-gradient(to left,  #FF1794 0%, #FFF037 14.81%, #39ED94 27.72%, #00B0EC 50.23%, #FF1794 67.56%, #FFF037 81.76%, #39ED94 100%) left;
   
  background-size:50% 100%;
  background-repeat:no-repeat;
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  background:
   linear-gradient(to bottom,#FF1794 0%, #FFF037 14.81%, #39ED94 27.72%, #00B0EC 50.23%, #FF1794 67.56%, #FFF037 81.76%, #39ED94 100%) bottom,
   linear-gradient(to top,   #FF1794 0%, #FFF037 14.81%, #39ED94 27.72%, #00B0EC 50.23%, #FF1794 67.56%, #FFF037 81.76%, #39ED94 100%) top;
  background-size:100% 50%;
  background-repeat:no-repeat;
  top:0;
  bottom:0;
  right:0;
  left:0;
  -webkit-clip-path: polygon(0% 0%, 50% 50%, 0% 100%, 100% 100%, 50% 50%, 50% 50%, 100% 0%);
  clip-path: polygon(0% 0%, 50% 50%, 0% 100%, 100% 100%, 50% 50%, 50% 50%, 100% 0%);
  animation:move 2s infinite alternate linear;
}

@keyframes move{
 to {transform:translate(100%)}
}

<div class="box">

</div>