如何通过::after、::before伪元素为图片添加右角半圆弧边框

你可以给图片外层套一个相对定位的容器，通过伪元素设置弧形边框覆盖在图片右侧边角位置即可实现需求，具体实现如下： #

基础HTML结构 #

<!-- 两张图片直接复用两次下方结构即可 -->
<div class="img-wrapper">
  <img src="你的图片地址" alt="图片说明">
</div>

CSS实现代码 #

/* 图片外层容器样式 */
.img-wrapper {
  position: relative;
  display: inline-block;
  /* 容器尺寸和图片保持一致即可，可自行调整 */
  width: 300px;
  height: 200px;
}
.img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 右上角弧形边框伪元素 */
.img-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  /* 圆弧尺寸按需调整，三个关联值保持一致可得到正圆弧效果 */
  width: 40px;
  height: 40px;
  border: 3px solid #fff; /* 边框颜色、粗细可自行修改 */
  border-color: transparent transparent #fff #fff;
  border-radius: 0 0 0 40px;
}
/* 右下角弧形边框伪元素 */
.img-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40px;
  height: 40px;
  border: 3px solid #fff;
  border-color: #fff transparent transparent #fff;
  border-radius: 40px 0 0 0;
}

补充说明 #

• 如果你需要的是图片右侧两个角本身做圆弧裁剪效果，不需要使用伪元素，直接给图片添加样式border-top-right-radius: 40px; border-bottom-right-radius: 40px;即可，弧度数值按需调整
• 如果需要弧度效果更明显，同步修改伪元素的width、height、border-radius三个参数即可

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