如何实现带倾斜蓝色下边框的图片倾斜效果？

提问内容： #

我无法复现上图效果，能实现图片倾斜，但不知如何添加同样倾斜的蓝色下边框

我的代码：

.image {
   position: relative;

    &:after {
      content: "";
      top: 0;
      left: 100%;
      width: 9%;
      bottom: 0;
      position: absolute;
      transform: skew(-8deg);
      transform-origin: top;
      background: blue;
    }
}

我不知道如何叠加...如何复现这种“双重效果”？谢谢

解决方案： #

你可以通过给容器设置整体倾斜，再新增伪元素实现底部的蓝色倾斜边框，同时保留原有的右侧蓝色斜块，调整参数让所有元素倾斜角度统一，具体代码如下：

.image {
  position: relative;
  /* 给容器设置统一的倾斜角度 */
  transform: skew(-8deg);
  overflow: hidden;
  /* 预留右侧蓝色块的空间，避免覆盖图片 */
  padding-right: 9%;
}

.image img {
  /* 反向倾斜图片，让图片内容保持正常不扭曲 */
  transform: skew(8deg);
  width: 100%;
  display: block;
}

/* 右侧蓝色斜块（保留原有逻辑，调整定位更合理） */
.image:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 9%;
  height: 100%;
  background: blue;
  transform: skew(-8deg);
  transform-origin: top right;
}

/* 新增底部蓝色倾斜边框 */
.image:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8px; /* 可根据需求调整边框高度 */
  background: blue;
  /* 和容器保持相同倾斜角度 */
  transform: skew(-8deg);
  /* 确保边框和容器底部对齐 */
  transform-origin: bottom left;
}

关键调整点： #

• 给.image容器添加transform: skew(-8deg)，让整体拥有统一的倾斜基准；
• 给img设置反向倾斜skew(8deg)，避免图片内容跟着容器扭曲；
• 用:before伪元素创建底部蓝色边框，设置相同倾斜角度并定位在容器底部；
• 调整原有:after伪元素的定位为right: 0，配合容器的padding-right，让蓝色块不遮挡图片。

这样就能同时实现图片倾斜、右侧蓝色斜块和底部倾斜蓝色边框的双重效果了。

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