Question

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

我能够实现4格的外观，但无法提出仅具有

一个div 及其使用渐变的背景属性的解决方案。

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

以下是我尝试过的想法，该想法明确了可以使用每个具有线性渐变的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>

1 个答案:

答案 0 :(得分：4)

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>

没有任何其他元素的div是否可以具有“矩形”或“菱形”的渐变效果？

1 个答案: