HTML中图片底部加div,html – 底部带有三角形的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;

}

三角形的左右部分由伪元素的左右边界隐藏.这就是为什么这种方法不适用于梯度或图像的原因.

三角形图像或渐变

在这些情况下,您可以使用带有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%;

}