css画直角梯形放图片 |calc css3

css盒模，css的flebox布局，php css 上下浮动，css float 强制不换行，css样式在图片上写字，js css纵向导航栏，calc css3 css画直角梯形放图片 |calc css3

.trapezoid {
position: relative; /*设置相对定位*/
width: 400px;
height: 0;
border-bottom: 100px solid #333; /*设置下边框*/
border-right: 50px solid transparent; /*设置右边框*/
border-left: 50px solid transparent; /*设置左边框*/
}
.trapezoid img {
position: absolute;
width: 100%;
height: 100%;
top: 0; /*设置图片位置为最上方*/
left: 0; /*设置图片位置为最左方*/
}

大家给.trapezoid设置一个相对定位，然后设置它的高度为0，只设置下边框和左右边框的斜度，通过这两条斜边的长度和宽度就可以得到梯形的上下边长度。最后大家使用绝对定位来放置图片，使图片覆盖在梯形之上。

这样大家就成功用CSS画出一个带图片的直角梯形啦！