在前端页面开发中，平行四边形样式的图片裁剪是较为常见的视觉需求，直接使用CSS的skew属性对图片本身进行变形，会导致图片内容也跟着倾斜，无法达到只裁剪外框的效果。要实现正确的平行四边形图片裁剪，需要借助嵌套容器的思路配合skew变形处理。
基础实现原理
核心思路是将图片放在两个嵌套的容器中，外层容器设置skew变形，内层容器再反向设置skew变形抵消倾斜，这样就能保证图片内容保持正常，仅外层容器呈现平行四边形形状，超出部分隐藏即可实现裁剪效果。
基础代码结构
首先搭建基础的HTML结构，外层容器作为裁剪框，内层容器包裹图片：
<div class="parallelogram-container">
<div class="img-wrapper">
<img src="https://picsum.photos/600/400?random=2" alt="示例图片">
</div>
</div>
对应CSS样式
接下来编写CSS样式，外层容器设置skew变形和溢出隐藏，内层容器反向skew抵消变形：
.parallelogram-container {
width: 600px;
height: 400px;
/* 设置水平方向倾斜20度，形成平行四边形 */
transform: skewX(-20deg);
overflow: hidden;
/* 可选：设置边框方便观察效果 */
border: 1px solid #ccc;
}
.img-wrapper {
width: 100%;
height: 100%;
/* 反向倾斜20度，抵消外层容器的倾斜，保证图片内容正常 */
transform: skewX(20deg);
}
.img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
}
常见问题与解决方案
图片偏移问题
如果外层容器倾斜后，图片出现位置偏移，可以给内层容器设置transform-origin属性调整变形原点，通常设置为左上角即可解决大部分偏移问题：
.img-wrapper {
width: 100%;
height: 100%;
transform: skewX(20deg);
/* 设置变形原点为左上角，避免偏移 */
transform-origin: left top;
}
多图片适配问题
如果是多个平行四边形图片排列的场景，可以给每个外层容器设置固定的倾斜角度，内层统一反向抵消即可，示例代码如下：
/* 通用平行四边形容器样式 */
.parallelogram-item {
width: 300px;
height: 200px;
transform: skewX(-15deg);
overflow: hidden;
margin-right: 20px;
float: left;
}
/* 通用图片包裹层样式 */
.parallelogram-item .img-inner {
width: 100%;
height: 100%;
transform: skewX(15deg);
transform-origin: left top;
}
.parallelogram-item .img-inner img {
width: 100%;
height: 100%;
object-fit: cover;
}
其他注意事项
- 倾斜角度不要设置过大，否则裁剪后的可视区域会过小，影响图片展示效果
- 如果页面需要兼容旧版本浏览器，需要添加对应的浏览器前缀，比如
-webkit-transform、-moz-transform - 可以通过调整外层容器的
overflow属性，实现不同的裁剪效果，比如设置为visible可以展示超出部分
这种通过嵌套容器配合skew变形的方式，不需要使用额外的图片处理工具，纯CSS就能实现平行四边形图片裁剪，灵活度较高，适合大部分前端页面的样式需求。