底部带有三角形的 div 和背景图像 [英] div with triangle at the bottom with background image
问题描述
我想做一个div
,底部有一个三角形.但是我需要出现三角形上的背景图像,我尝试使用伪元素 (:after
) 但它不起作用.
I want to make a div
, with a triangle at the bottom.
But I need the background image on the triangle to appear, I've tried using a pseudo element (:after
) but it doesn't work.
#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
看起来像这张图片中的 background
三角形:
I need to make the div
appear like in this image with the background
in the triangle :
推荐答案
纯色上的三角形
如果三角形显示在纯色上,您可以将这种方法与绝对定位的伪元素一起使用:
Triangle over a plain color
If the triangle is displayed over a plain color, you can use this approach with an absolutely positioned pseudo element :
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>
三角形的左右部分被伪元素的左右边框隐藏.这就是为什么这种方法不适用于渐变或图像的原因.
The left and right parts of the triangle are hidden by the left and right borders of the pseudo element. That is why this approach won't work over a gradient or image.
在这些情况下,您可以使用带有 clipPath 和 polygon 元素:
In these cases, you can use an inline svg with clipPath and a polygon element :
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透明箭头/三角形
There are other possible approaches for the same result. You can find some here : CSS Transparent arrow/triangle
这篇关于底部带有三角形的 div 和背景图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!