那些遇到过的问题

具有2个梯度级别的线性渐变三角形(颜色停止)

Hit*_*shi 4 html css linear-gradients css3 css-shapes

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

我希望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%);
}
Run Code Online (Sandbox Code Playgroud)

我的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>
Run Code Online (Sandbox Code Playgroud)

(使用Semantic-UI获取底部粘性)

实例:http://jsfiddle.net/fu2dhfdv/1/

Har*_*rry 5

据我所知,linear-gradient单独使用背景图像无法做到这一点,因为右三角形本身只显示为三角形,因为它对50%是透明的并且为休息而填充.如果我们在这个图层的顶部放置另一层从左到右的渐变,那么triangle-bottom-right如果我们在这个图层的底部放置从左到右的渐变,那么渐变将显示为(或)的整个正方形区域. 将显示整个方形区域,因为产生三角形的渐变的上半部分是透明的.因此,唯一的选择是(a)将上半部分设为"白色"并将第二个渐变放置在其下方或(b)使用遮罩或剪辑路径隐藏上半部分.

使用SVG Mask:

由于CSS掩码和CSS剪辑路径目前都没有良好的浏览器支持.最好的选择是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);
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

使用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);
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

使用CSS Masks :(最适合您,因为Chrome是唯一的目标)

由于您已指出目标浏览器仅为Chrome并且其中mask支持CSS ,因此您还可以使用-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%);
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

使用CSS剪辑路径:(再次有用,因为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%);
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

912 次

最近记录：

9 年，4 月 前
相关归档
将图标放入圆圈 89
如何使用ng-style设置div宽度 79
如何在网站上使用自定义字体？ 70
如何使HTML <div>元素可编辑跨浏览器？ 59
如何使Facebook评论小部件流畅？ 35
在JS中插入兄弟节点 24
如果元素仅使用css不适合可用宽度,我可以隐藏它吗？ 17
Bootstrap:Prepended input:围绕前置元素的轮廓 6
Firefox中的CSS动画Bug 5
带有display none的CSS动画关键帧可以淡入,但不会淡出 1
难疑归档
为什么Java的+ =, - =,*=,/ =复合赋值运算符需要转换？ 3547
如何使用JavaScript漂亮地打印JSON？ 2222
如何将多行中的文本连接成SQL Server中的单个文本字符串？ 1813
为什么在数组迭代中使用"for ... in"是一个坏主意？ 1761
在Android上旋转活动重启 1341
如何删除重复的行？ 1254
Tab键== 4个空格并在Vim中的花括号后自动缩进 1224
忽略git项目中的任何"bin"目录 1172
在Python中将两个列表转换为字典 1101
有哪些常用的命名git分支实例的例子？ 1034