代码之家 › 专栏 › 技术社区 › Nitesh

有没有一种方法可以在没有任何其他元素的情况下对一个DIV产生“矩形”或“菱形”的渐变效果?

linear-gradients css3 css

-3

Nitesh · 技术社区 · 7 年前

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

我可以用4个div来实现外观,但无法提出仅使用单个div 和其background属性using gradients的解决方案。

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

下面是我尝试的想法,这表明可以使用4个带有线性渐变的div:

下面是上面示例的代码:

box1{ 背景图像:线性梯度(225度,ff1794 0%,fff037 14.81%,39ed94 27.72%,00b0ec 50.23%,ff1794 67.56%,fff037 81.76%,39ed94 100%); 宽度:107px; 高度:116px; 左:228 px; 顶部:335px; 位置:绝对; 变换:旋转(-45度); } βx2 背景图像:线性梯度(-45度,ff1794 0%,fff037 14.81%,39ed94 27.72%,00b0ec 50.23%,ff1794 67.56%,fff037 81.76%,39ed94 100%); 宽度:107px; 高度:116px; 左:308px; 顶部:415px; 位置:绝对; 变换:旋转(-45度); } βx3 背景图像:线性梯度(135度,ff1794 0%,fff037 14.81%,39ed94 27.72%,00b0ec 50.23%,ff1794 67.56%,fff037 81.76%,39ed94 100%); 宽度:107px; 高度:114px; 左:153px; 顶部:410px; 位置:绝对; 变换:旋转(-45度); } Box 4{ 背景图像:线性梯度(45度,ff1794 0%,fff037 14.81%,39ed94 27.72%,00b0ec 50.23%,ff1794 67.56%,fff037 81.76%,39ed94 100%); 宽度:107px; 高度:115px; 左侧:244px; 顶部:490px; 位置:绝对; 变换:旋转(-45度); }<代码> < /PRE>
<div id=“box1”> &!-----GT; 和; <div id=“box2”> &!-----GT; 和; <div id=“box3”> &!-----GT; 和; <div id=“box4”> &!-----GT; 和; </DIV>>=

< / 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 回复 | 直到 7 年前

1

4

Temani Afif 7 年前

对于第二个,您可以简单地使用多个渐变在每个角创建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 . 伪元素将与主元素在相反方向上具有相同的渐变,然后 剪辑路径 从每边切两个三角形:

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