css图像变为梯形 |jquer css3 放大

使用CSS可以轻松将一个矩形变为梯形。下面大家来看看如何实现。 首先，大家需要一个矩形的DIV元素，然后使用transform属性进行倾斜变形，如下所示：

.rect {
width: 200px;
height: 100px;
background-color: #ccc;
transform: skew(-20deg);
}

这个样式将会使这个矩形倾斜成一个梯形，但是右侧有一部分空白区域。为了让它更像一个完美的梯形，大家需要将宽度进行微调。如下所示：

.trap {
width: 220px;
height: 100px;
background-color: #ccc;
transform: skew(-20deg);
}

现在大家的梯形看上去已经比之前好多了，但是它并不具有完美的直角和直线。这时候，大家可以通过伪类:before和:after来添加两个三角形元素，从而让梯形的两侧变成完美直角。如下所示：

.trap {
width: 220px;
height: 100px;
background-color: #ccc;
position: relative;
transform: skew(-20deg);
}
.trap:before, .trap:after {
content: "";
position: absolute;
bottom: 0;
width: 0;
height: 0;
}
.trap:before {
left: -10px;
border-bottom: 50px solid transparent;
border-right: 10px solid #ccc;
border-top: 50px solid transparent;
transform: skew(20deg);
}
.trap:after {
right: -10px;
border-bottom: 50px solid transparent;
border-left: 10px solid #ccc;
border-top: 50px solid transparent;
transform: skew(-20deg);
}

代码解析： – 首先设置了元素的position为relative，以便伪类:before和:after的位置可以相对于它来定位。 – 伪类:before和:after都是一个空的元素，通过border属性创造出两个等腰直角三角形。 – 三角形的高度为50px，即等于矩形的高度，左右两侧通过向内倾斜边缘使其贴合到梯形的两侧。 – 最后，用transform属性让三角形也倾斜成同一个角度，以达到完美的效果。 现在，大家就成功地将一个矩形变成了一个漂亮的梯形。如果你有更好的想法，欢迎留言分享哦！