如何使用HTML实现两张图片倾斜重叠摆放的效果

通过CSS的transform属性配合相对定位即可实现该效果，以下是完整实现代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>倾斜重叠图片效果</title>
    <style>
        .pic-wrapper {
            position: relative;
            width: 500px;
            height: 400px;
            margin: 60px auto;
        }
        .pic-wrapper img {
            position: absolute;
            width: 320px;
            border-radius: 6px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            transform: rotate(-10deg);
        }
        .pic-wrapper img:nth-of-type(2) {
            transform: rotate(10deg);
            left: 140px;
            top: 40px;
            z-index: 1; /* 如需调整上下层，修改该数值即可 */
        }
    </style>
</head>
<body>
    <div class="pic-wrapper">
        <img src="你的第一张图片路径" alt="图片1">
        <img src="你的第二张图片路径" alt="图片2">
    </div>
</body>
</html>

效果调整说明 #

• 调整rotate()内的数值可以修改倾斜角度，正数为顺时针倾斜，负数为逆时针倾斜
• 修改第二张图片的top、left参数可以调整两张图片的重叠位置和重叠幅度
• 调整z-index的数值可以控制哪张图片显示在上层，数值越大层级越高
• 如果需要斜切效果而非旋转倾斜，可以将rotate替换为skew属性，参数设置逻辑一致

内容的提问来源于stack exchange，提问作者Astralic_