css如何把图片设置成梯形,css实现梯形

使用伪元素before和after分别在矩形元素前后加三角形或者直接设置border

使用3d旋转矩形，使之看起来像矩形

.trapezoid-0{

border-bottom: 100px solid #fb3;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

height: 0;

width: 100px;

margin: 0 0 20px 0;

}

.trapezoid-1{

border-radius: .5em .5em 0 0;

margin: 20px;

height: 40px;

width: 100px;

background: #fb3;

transform-origin: bottom;

transform: scaleY(1.3) perspective(.5em) rotateX(5deg);

/*scaleY: 纵轴放大1.3倍，使梯形高度等于height；perspective:3d透视效果，元素距离视图的距离*/

}

各种demo：css实现三角形，css大小梯形，svg使用

各种demo: 1.css实现正方形 思路:width为0:height为0:使用