有没有办法让 'rectangular' 或 'diamond' 像没有任何其他元素的 div 的渐变效果？

Question

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

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

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

以下是我尝试的想法，它清楚地表明可以使用 4 divs，每个都具有线性渐变：

以上示例的代码如下：

#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>

有没有办法让 'rectangular' 或 'diamond' 像没有任何其他元素的 div 的渐变效果？

Is there a way to have a 'rectangular' or 'diamond' like gradient effect for a div without any other element?

css

linear-gradients