我目前在页面底部显示2个三角形,一个在左边,一个在右边.直角三角形是透明的.两个三角形都有一种颜色.
我希望三角形 – 右下角有一个额外的渐变级别(额外的颜色停止).
它应该从左到右,从rgba(70,70,0.15)开始,以rgba(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,0) 50%); } .triangle-bottom-right { position: absolute;; width: 125%; height: 140%; right: 0px; bottom: 0px; background: linear-gradient(to left top,rgba(70,0.15) 50%,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>
解决方法
据我所知,单独使用线性渐变背景图像无法做到这一点,因为直角三角形本身只显示为三角形,因为它对50%是透明的并且为休息填充.如果我们在此图层的顶部放置另一层从左到右的渐变,那么如果我们在左下方放置从左到右的渐变,则渐变将显示为三角形 – 右下角(或)的整个正方形区域此层也将显示整个方形区域,因为产生三角形的渐变的上半部分是透明的.因此,唯一的选择是(a)将上半部分设为“白色”并将第二个渐变放在其下方或(b)使用遮罩或剪辑路径隐藏上半部分.
使用SVG Mask:
由于CSS掩码和CSS剪辑路径目前都没有良好的浏览器支持.最好的选择是使用内联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,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,0.35)" /> <stop offset="100%" stop-color="rgba(255,0)" /> </linearGradient> <mask id="triangle"> <polygon points="0,0 100,100 0,100" fill="black" /> <polygon points="0,90 0,100 100,0" fill="white" /> </mask> </defs> <polygon points="0,100" id="right-triangle" /> </svg> </div> </div>
使用SVG多边形:(也可以使用路径元素)
这也可以使用一个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,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,0)" /> </linearGradient> </defs> <polygon points="0,0" id="right-triangle" /> </svg> </div> </div>
使用CSS Masks :(最适合您,因为Chrome是唯一的目标)
由于您已指示目标浏览器仅为Chrome并且其中支持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,0) 50%); } .triangle-bottom-right { position: absolute; width: 125%; height: 140%; right: 0px; bottom: 0px; background: linear-gradient(to right,0.15),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剪辑路径:(再次有用,因为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,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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。