我想做一个div,底部有一个三角形.
但我需要在三角形上显示背景图像,我尝试使用伪元素(:after)但它不起作用.
但我需要在三角形上显示背景图像,我尝试使用伪元素(:after)但它不起作用.
#homebg:after{ content:''; position: absolute; top: 100%; left: 0; right: 0; margin: 0 auto; width: 0; height: 0; border-top: solid 50px #fff; border-left: solid 48vw transparent; border-right: solid 48vw transparent; }
我需要使用三角形中的背景使div显示在此图像中:
解决方法
纯色三角形
如果三角形显示为纯色,则可以使用此方法使用绝对定位的伪元素:
div{ position:relative; background:url('http://i.imgur.com/W27LCzB.jpg'); background-size:cover; min-height:100px; padding-bottom:100px; overflow:hidden; } div:after{ content:''; position:absolute; bottom:0; left:0; border-left:50vw solid #fff; border-right:50vw solid #fff; border-top:100px solid transparent; }
<div></div>
三角形的左右部分由伪元素的左右边界隐藏.这就是为什么这种方法不适用于梯度或图像的原因.
三角形图像或渐变
在这些情况下,您可以使用带有clipPath和polygon元素的内联svg:
body,html{ height:100%; background:url('https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg')no-repeat center center; background-size:cover; } svg{ display:block; width:100%; }
<svg viewBox="0 0 100 40"> <clipPath id="clip"> <polygon points="0 0 100 0 100 25 50 40 0 25" /> </clipPath> <image xlink:href="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" width="100" height="65" clip-path="url(#clip)"/> </svg>
对于相同的结果,还有其他可能的方法.你可以在这里找到一些:CSS Transparent arrow/triangle
原文地址:https://www.jb51.cc/html/231318.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。