logo标签列表

带有两个渐变级别（颜色停止）的线性渐变三角形。

htmlcsscss-shapeslinear-gradients
4

我目前在页面底部显示两个三角形，一个在左侧，一个在右侧。右边的三角形是透明的，两个三角形都只有一种颜色。

我想让三角形 triangle-bottom-right 增加一个渐变级别（额外的颜色停止点）。

它应该从左到右开始，以 rgba(70, 70, 70, 0.15) 开始，并以 rgba(70, 70, 70, 0) 结束。目标浏览器是 Chrome（通过 Electron 运行）。

结果三角形应能够调整大小以适应浏览器宽度，高度是恒定的。

我的 CSS：

.triangle-footer {
    position: relative;
    bottom: 0px;
    height: 176px;
    width: 100%;
}
.triangle-bottom-left {
    position: absolute;
    width: 40%;
    height: 100%;
    left: 0px;
    bottom: 0px;
    background: linear-gradient(to right top, rgba(94, 194, 82, 100) 50%, rgba(255, 255, 255, 0) 50%);
}
.triangle-bottom-right {
    position: absolute;;
    width: 125%;
    height: 140%;
    right: 0px;
    bottom: 0px;
    background: linear-gradient(to left top, rgba(70, 70, 70, 0.15) 50%, rgba(255, 255, 255, 0) 50%);
}

我的HTML：

<div class="ui fixed bottom sticky triangle-footer">
  <div class="triangle-bottom-left"></div>
</div>

<div class="ui fixed bottom sticky triangle-footer">
  <div class="triangle-bottom-right"></div>
</div>

（使用Semantic-UI实现底部固定）

示例： http://jsfiddle.net/fu2dhfdv/1/

不太明白。右下角的三角形已经有了指定的渐变。你在寻找什么？如果可能的话，能添加一张期望输出的图片吗？ - Harry
完成。希望现在更清楚了。我想让“triangle-bottom-right”从左侧开始以一种颜色开始，然后以右侧的另一种颜色结束。 - HitomiTenshi
好的，你的意思是在通过渐变创建的三角形中，你需要一个从左到右（或从右到左）的渐变，而不是从右下到左上的渐变？这将非常困难，因为三角形本身仅是由于右下到左上的渐变而创建的。如果你在它上面或下面添加另一层具有从左到右的渐变，它将无法产生这种效果。你可能需要一个蒙版，除非你的右三角形的上半部分可以是白色而不是透明的。 - Harry
您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - HitomiTenshi
如何使用遮罩？我对任何实现方式都持开放态度，唯一需要的是三角形的宽度百分比，以便它们可以根据浏览器宽度进行调整大小。 - HitomiTenshi
2个回答
5
据我所知，仅使用linear-gradient背景图像无法完成此操作，因为右下角三角形本身仅由50％的透明度和其余部分的填充显示为三角形。如果我们在此图层上方放置另一层从左到右的渐变，则渐变将显示在triangle-bottom-right的整个正方形区域（或者）如果我们将从左到右的渐变放在此图层底部，那么它也将显示在整个正方形区域中，因为产生三角形的渐变的顶半部分是透明的。因此，唯一的选择是（a）使顶半部分为“白色”，并将第二个渐变放在其下方，或者（b）使用蒙版或剪辑路径隐藏顶半部分。

使用SVG蒙版：

由于CSS蒙版和CSS剪辑路径目前在浏览器支持方面都不太好。最好的选择是利用内联SVG来实现mask，就像下面的代码片段中一样。

.triangle-footer {
  position: relative;
  bottom: 0px;
  height: 176px;
  width: 100%;
}
.triangle-bottom-left {
  position: absolute;
  width: 40%;
  height: 100%;
  left: 0px;
  bottom: 0px;
  background: linear-gradient(to right top, rgba(94, 194, 82, 100) 50%, rgba(255, 255, 255, 0) 50%);
}
.triangle-bottom-right {
  position: absolute;
  width: 125%;
  height: 140%;
  right: 0px;
  bottom: 0px;
}
svg {
  position: relative;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
}
polygon#right-triangle {
  fill: url(#grad);
  mask: url(#triangle);
}
<script src="http://semantic-ui.com/dist/semantic.js"></script>
<link href="http://semantic-ui.com/dist/semantic.css" rel="stylesheet" />
<div class="ui fixed bottom sticky triangle-footer">
  <div class="triangle-bottom-left"></div>
</div>

<div class="ui fixed bottom sticky triangle-footer">
  <div class="triangle-bottom-right">
    <svg viewBox="0 0 100 100" preserveAspectRatio="none">
      <defs>
        <linearGradient id="grad">
          <stop offset="0%" stop-color="rgba(70, 70, 70, 0.35)" />
          <stop offset="100%" stop-color="rgba(255, 255, 255, 0)" />
        </linearGradient>
        <mask id="triangle">
          <polygon points="0,0 100,0 100,100 0,100" fill="black" />
          <polygon points="0,90 0,100 100,100 100,0" fill="white" />
        </mask>
      </defs>
      <polygon points="0,0 100,0 100,100 0,100" id="right-triangle" />
    </svg>
  </div>
</div>

使用SVG多边形：（也可以使用path元素实现）

这也可以使用一个SVG polygon元素来实现，而不是像下面的代码片段中使用mask。我将让您选择其中之一 :)

.triangle-footer {
  position: relative;
  bottom: 0px;
  height: 176px;
  width: 100%;
}
.triangle-bottom-left {
  position: absolute;
  width: 40%;
  height: 100%;
  left: 0px;
  bottom: 0px;
  background: linear-gradient(to right top, rgba(94, 194, 82, 100) 50%, rgba(255, 255, 255, 0) 50%);
}
.triangle-bottom-right {
  position: absolute;
  width: 125%;
  height: 140%;
  right: 0px;
  bottom: 0px;
}
svg {
  position: relative;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
}
polygon#right-triangle {
  fill: url(#grad);
}
<script src="http://semantic-ui.com/dist/semantic.js"></script>
<link href="http://semantic-ui.com/dist/semantic.css" rel="stylesheet" />
<div class="ui fixed bottom sticky triangle-footer">
  <div class="triangle-bottom-left"></div>
</div>

<div class="ui fixed bottom sticky triangle-footer">
  <div class="triangle-bottom-right">
    <svg viewBox="0 0 100 100" preserveAspectRatio="none">
      <defs>
        <linearGradient id="grad">
          <stop offset="0%" stop-color="rgba(70, 70, 70, 0.35)" />
          <stop offset="100%" stop-color="rgba(255, 255, 255, 0)" />
        </linearGradient>
      </defs>
      <polygon points="0,90 0,100 100,100 100,0" id="right-triangle" />
    </svg>
  </div>
</div>

使用CSS遮罩：（适用于Chrome浏览器）

由于您指定的目标浏览器仅为Chrome，并且CSS mask在其中受支持，因此您可以像以下代码片段中那样使用带有线性渐变的-webkit-mask-image属性。我将其列为最后一个选项，仅因为对于使用不同浏览器的其他用户来说，这是最不推荐的。

.triangle-footer {
  position: relative;
  bottom: 0px;
  height: 176px;
  width: 100%;
}
.triangle-bottom-left {
  position: absolute;
  width: 40%;
  height: 100%;
  left: 0px;
  bottom: 0px;
  background: linear-gradient(to right top, rgba(94, 194, 82, 100) 50%, rgba(255, 255, 255, 0) 50%);
}
.triangle-bottom-right {
  position: absolute;
  width: 125%;
  height: 140%;
  right: 0px;
  bottom: 0px;
  background: linear-gradient(to right, rgba(70, 70, 70, 0.15), rgba(255, 255, 255, 0));
  -webkit-mask-image: linear-gradient(to top left, white 50%, transparent 50%);
}
<script src="http://semantic-ui.com/dist/semantic.js"></script>
<link href="http://semantic-ui.com/dist/semantic.css" rel="stylesheet" />
<div class="ui fixed bottom sticky triangle-footer">
  <div class="triangle-bottom-left"></div>
</div>

<div class="ui fixed bottom sticky triangle-footer">
  <div class="triangle-bottom-right">
  </div>
</div>

使用CSS Clip Path：（因为只需要兼容Chrome浏览器，所以这是再次使用的好方法）

以下代码片段展示了如何使用CSS clip-path实现相同效果。将右下角元素剪切成所需的三角形状并应用从左到右的渐变效果。

.triangle-footer {
  position: relative;
  bottom: 0px;
  height: 176px;
  width: 100%;
}
.triangle-bottom-left {
  position: absolute;
  width: 40%;
  height: 100%;
  left: 0px;
  bottom: 0px;
  background: linear-gradient(to right top, rgba(94, 194, 82, 100) 50%, rgba(255, 255, 255, 0) 50%);
}
.triangle-bottom-right {
  position: absolute;
  width: 125%;
  height: 140%;
  right: 0px;
  bottom: 0px;
  background: linear-gradient(to right, rgba(70, 70, 70, 0.15), rgba(255, 255, 255, 0));
  -webkit-clip-path: polygon(0% 90%, 0% 100%, 100% 100%, 100% 0%);
}
<script src="http://semantic-ui.com/dist/semantic.js"></script>
<link href="http://semantic-ui.com/dist/semantic.css" rel="stylesheet" />
<div class="ui fixed bottom sticky triangle-footer">
  <div class="triangle-bottom-left"></div>
</div>

<div class="ui fixed bottom sticky triangle-footer">
  <div class="triangle-bottom-right">
  </div>
</div>

1
一如既往的好答案！但由于三角形是仅用于此目的的单独元素，因此可以进行变换：旋转。（并获得更好的支持） - vals
@vals，说得好。这需要元素更大，并且具有倾斜的线性渐变来覆盖旋转。您是否计划发布单独的答案？如果是，我将避免将其更新到我的答案中。 - Harry
其实现在我记得@vals了，我确实尝试过使用transforms（你会在两个CSS片段中看到无关的transform-origin），但由于宽度必须是动态的，所以放弃了，因为角度产生了不同的结果。 - Harry
1
你说得对，那可能是个问题...我会尝试解决它 :-) - vals
1
我没有注意到处理宽度变化的要求... 这使得旋转或其他变换不合适（或者至少我找不到方法）。 :-( - vals
True @vals。我尝试了skewY，但效果也不是很好:( - Harry
2

仅供参考，可作为纯白背景的备选方案。

可以使用3个渐变和background-size属性来实现。

html {
  min-height:100%;
  background:
    linear-gradient(to  left, rgba(255,255,255,0.75), rgba(255,255,255,0) 60%) bottom no-repeat,
    linear-gradient(to top left, rgba(0,0,0,0.1) 50%, transparent 50%)bottom right no-repeat,
    linear-gradient( to top right, #5EC252 50%, transparent 50%)bottom left no-repeat white;  
  background-size:100% 245px, 127% 245px ,  40%  170px;
}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接