如何实现左侧边框倾斜且不影响右侧边框，同时图片适配边框无变形

我折腾了好几个小时想要做出这种边框样式，试过transform: skewX(20deg)和clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%)，但都没达到理想效果。以下是我目前最接近需求的代码：

现有代码 #

HTML #

<div class="skewed-image">
  <img src="/smiling-coworkers.png" alt="Your Image" />
</div>

CSS #

.skewed-image {
  margin-top: 100px;
  margin-left: 200px;
  width: 500px;
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-right: 2px solid #000; /* 可调整颜色和宽度 */
  border-radius: 40px 0 0 40px; /* 可调整圆角大小 */
  clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%);
}

.skewed-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 40px 0 0 40px; /* 和容器保持一致的圆角 */
}

我想要实现的效果是：图片左侧上下角带圆角，右侧是从右上角到左下角的斜切斜边，同时斜切的右侧带有边框。

解决方案 #

可以通过调整clip-path的多边形点位，同时利用伪元素来实现右侧的边框，避免直接给容器加边框被裁剪的问题：

优化后的代码 #

HTML

<div class="skewed-image">
  <img src="/smiling-coworkers.png" alt="Your Image" />
</div>

CSS

.skewed-image {
  margin-top: 100px;
  margin-left: 200px;
  width: 500px;
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-radius: 40px 0 0 40px;
  /* 调整clip-path实现右侧斜切效果 */
  clip-path: polygon(0% 0%, calc(100% - 60px) 0%, 100% 50%, calc(100% - 60px) 100%, 0% 100%);
}

.skewed-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 40px 0 0 40px;
}

/* 用伪元素添加右侧斜边框 */
.skewed-image::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 60px; /* 斜切的宽度，可调整 */
  height: 100%;
  border-right: 2px solid #000;
  /* 斜切伪元素匹配容器的斜角 */
  transform: skewX(-20deg);
  transform-origin: top right;
}

说明 #

1. 调整clip-path的点位，calc(100% - 60px)控制斜切的宽度，让右侧形成从右上到左下的斜边；
2. 使用伪元素::after来添加右侧边框，避免直接给容器加边框被clip-path裁剪；
3. 通过transform: skewX(-20deg)和transform-origin: top right让伪元素的边框和容器的斜切边缘对齐；
4. 可根据需求调整60px（斜切宽度）、-20deg（斜切角度）以及圆角、边框的参数。

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