css 实现内凹圆角

效果图

结构说明

1. 整体分为上、中、下 三部分
2. 上、下部分均通过 ::before 和 ::after 设置左右两块元素，并设置背景和距离
3. 中 部使用 box-shadow 和 overflow 来填充背景

   <div class="bg-mask-name">
     <div class="name-box">
       <div class="name-box-inner">名字</div>
     </div>
   </div>
   

   结构如上，从里到外， .name-box-inner 设置中间名称背景和圆角， .name-box 设置 box-shadow （shddow足够大）和圆角，最后.bg-mask-name 设置 overflow即可

完整代码

<div class="bg-mask">
    <div class="bg-mask-top"></div>
    <div class="bg-mask-name">
      <div class="name-box">
        <div class="name-box-inner">名字</div>
      </div>
    </div>
    <div class="bg-mask-bottom"></div>
</div>

:root {
  --font-size-big: 24px;
  --color-black: #2f2f2f;
  --margin: 6px;
  --border-radius: 6px;
}
.bg-mask {
  display: flex;
  flex-direction: column;
  // 中间部分
  &-name {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    .name-box {
      height: 100%;
      width: 80px;
      box-sizing: border-box;
      border-radius: var(--border-radius);
      box-shadow: 0 0 0 1000px var(--color-black);
      border: var(--margin) solid transparent;
      &-inner {
        height: 100%;
        width: 100%;
        border-radius: var(--border-radius);
        background-color: var(--color-black);
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: var(--font-size-big);
        color: var(--color-blue);
        letter-spacing: -1px;
      }
    }
  }
  // 上 下 部分
  &-top,
  &-bottom {
    height: 40%;
    position: relative;
    &::before,
    &::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      background-color: var(--color-black);
    }
    &::before{
      left: 0;
      right: calc(50% + calc(var(--margin) / 2));
      border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 0;
    }
    &::after {
      right: 0;
      left: calc(50% + calc(var(--margin) / 2));
      border-radius: var(--border-radius) var(--border-radius) 0 var(--border-radius);
    }
  }
  &-bottom {
    flex: 1;
    height: 0;
    &::before{
      border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
    }
    &::after {
      border-radius: var(--border-radius) 0 var(--border-radius) var(--border-radius);
    }
  }
  // 无效代码，用以区分不同块，以做演示结构说明
  &-top::before {
    background-color: #168727;
  }
  &-top::after {
    background-color: #165087;
  }
  &-bottom::before {
    background-color: #3a0f76;
  }
  &-bottom::after {
    background-color: #8d5407;
  }
}