如何使用CSS实现右上角为弧形的div布局效果

你要实现的右上角内凹弧形无法通过原生border-radius直接生成（原生border-radius仅支持外凸圆角），通过绝对定位的伪元素模拟切除效果即可实现，同时先修正你原有CSS的语法问题：普通CSS不支持选择器嵌套，你原有代码里.childBox错误嵌套在.box的样式规则中。

完整实现代码 #

HTML代码 #

<div class="box">
   <div class="childBox">
       <img/>
    </div>
</div>

CSS代码（适配纯色背景场景） #

/* 此处背景色需和.box父级容器的背景色保持一致，可根据实际场景调整 */
body {
  background: #fff;
}
.box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 40px;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 10px rgba(0, 0, 0, 0.1);
    border-top-left-radius: 20%;
    border-bottom-left-radius: 40px;
}
/* 右上角内凹弧形伪元素 */
.box::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 10px; /* 可根据需要的弧度大小调整数值 */
    height: 10px; /* 与宽度保持一致即可得到正圆弧形 */
    border-bottom-left-radius: 10px; /* 仅设置左下圆角，模拟内凹效果 */
    background: #fff; /* 和父级背景色完全一致，实现“切除”观感 */
    box-shadow: -1px -1px 2px rgba(0,0,0,0.05); /* 可选，补全阴影衔接效果 */
}
.childBox {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1; /* 层级高于伪元素，避免内容被遮挡 */
}

效果说明 #

实现效果与参考图一致：

• 可通过调整.box::after的宽高数值修改内凹弧度的大小
• 该方案兼容性好，支持所有主流浏览器

备选方案（适配非纯色背景） #

如果容器背景是渐变、图片等非纯色场景，可使用CSS mask属性实现，不需要设置伪元素匹配背景色：

.box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 40px;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 10px rgba(0, 0, 0, 0.1);
    border-top-left-radius: 20%;
    border-bottom-left-radius: 40px;
    /* 10px对应内凹弧度大小，可自行调整 */
    mask: radial-gradient(circle at top right, transparent 0, transparent 10px, #000 10px);
    -webkit-mask: radial-gradient(circle at top right, transparent 0, transparent 10px, #000 10px);
}

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