我想制作一个div
,底部有一个三角形。
但是我需要在三角形上显示背景图像,我尝试使用伪元素(: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;
}
答案 0 :(得分:12)
如果三角形显示在普通颜色上,则可以使用此方法使用绝对定位的伪元素:
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
答案 1 :(得分:5)
您可以使用剪贴蒙版
div {
-webkit-clip-path: polygon(0% 0%, 100% 0, 100% 75%, 50% 100%, 0 75%);
clip-path: polygon(0% 0%, 100% 0, 100% 75%, 50% 100%, 0 75%);
}
查看this网站以生成自己的面具。
答案 2 :(得分:1)
我们只能使用linear-gradient
和mask
来做到这一点。您可以调整所需的高度。
div {
--triangle-height: 100px; /* you can change this */
--mask: linear-gradient(#000, #000) 0 0/100% calc(100% - var(--triangle-height)) no-repeat,
linear-gradient(to top right, transparent 49.5%, #000 50% 100%) 0 100%/50% var(--triangle-height) no-repeat,
linear-gradient(to top left, transparent 49.5%, #000 50% 100%) 100% 100%/50% var(--triangle-height) no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
width: 500px;
height: 400px;
background: url(https://i.picsum.photos/id/1043/5184/3456.jpg?hmac=wsz2e0aFKEI0ij7mauIr2nFz2pzC8xNlgDHWHYi9qbc) 50% 50%/cover;
background-repeat: no-repeat;
}
<div></div>
通过更改变量并调整width: 100%
div {
--triangle-height: 200px; /* you can change this */
--mask: linear-gradient(#000, #000) 0 0/100% calc(100% - var(--triangle-height)) no-repeat,
linear-gradient(to top right, transparent 49.5%, #000 50% 100%) 0 100%/50% var(--triangle-height) no-repeat,
linear-gradient(to top left, transparent 49.5%, #000 50% 100%) 100% 100%/50% var(--triangle-height) no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
width: 100%;
height: 400px;
background: url(https://i.picsum.photos/id/1043/5184/3456.jpg?hmac=wsz2e0aFKEI0ij7mauIr2nFz2pzC8xNlgDHWHYi9qbc) 50% 50%/cover;
background-repeat: no-repeat;
}
<div></div>