html - 具有 2 个渐变级别(色标)的线性渐变三 Angular 形

标签 html css css-shapes linear-gradients

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

我希望 triangle-bottom-right 有一个额外的渐变级别(额外的色标)。

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

生成的三 Angular 形应该能够根据浏览器宽度调整大小，高度不变。

我的 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/

最佳答案

据我所知，这不能单独使用 linear-gradient 背景图像来完成，因为直 Angular 三 Angular 形本身显示为三 Angular 形只是因为它 50% 是透明的，其余部分是填充的。如果我们在这一层之上放置另一层从左到右的渐变，那么渐变将显示在 triangle-bottom-right 的整个正方形区域(或者)如果我们将 left-该层底部的向右渐变也会显示整个方形区域，因为产生三 Angular 形的渐变的上半部分是透明的。因此，唯一的选择是 (a) 将上半部分设为“白色”并将第二个渐变置于其下方，或者 (b) 使用蒙版或剪辑路径隐藏上半部分。

使用 SVG 蒙版:

由于CSS mask和CSS clip-path目前都没有很好的浏览器支持。最好的选择是为 mask 使用内联 SVG，如下面的代码片段所示。

.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 Masks:(最适合您，因为 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 来完成。右下角的元素被剪裁成所需的三 Angular 形形状，并对其应用从左到右的渐变。

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

关于html - 具有 2 个渐变级别(色标)的线性渐变三 Angular 形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36934807/

上一篇：html - Bootstrap 侧边栏导航就像在组件站点上一样

下一篇：html - Internet Explorer (IE11) 忽略 CSS 内嵌 : avoid

相关文章：

css - CSS3 中的圆弧/曲线而不是图像 - 边界半径？

html - 一次性内联样式？

css - 为什么当我点击顶部的几个像素时我的按钮不起作用

jquery - 使用 jquery 删除没有 child 的 div

css - 如何使用 CSS 绘制左指三 Angular 形？

html - 创建特定的 div 形状(如带尾部的多边形)

javascript - 显示需要用户名和密码的消息是什么？

php - 如何使用提交按钮激活 AJAX 功能？

HTML 和 CSS 网格未与 CSS 中的 RBRACE 错误正确对齐

javascript - 我无法在打印预览中看到 div 的背景图像

©2024 IT工具网  联系我们