如何实现外侧内凹圆角效果？（类似CSS3 Inset border-radius反向效果）

你要的外侧内凹圆角效果，可以通过伪元素+背景色覆盖的纯CSS方式实现，不需要JS。核心思路是用一个和页面背景色一致的圆角块，覆盖下方元素的左上角，和上方元素的圆角形成内凹衔接。

直接修改你的代码即可：

<script src="https://cdn.tailwindcss.com"></script>
<div class='flex flex-col justify-end'>
  <p class='bg-gray-800/75 rounded-b-none rounded-lg px-1 mr-auto'>2023</p>
  <h3 class='bg-gray-800/75 rounded-tl-none rounded-lg px-1 mr-auto relative before:absolute before:-top-[8px] before:left-0 before:w-[8px] before:h-[8px] before:bg-white before:rounded-br-full'>
    Freelance
  </h3>
</div>

原理说明： #

1. 因为你用了rounded-lg（圆角半径8px），所以给下方的h3加一个绝对定位的伪元素：
   • 尺寸设为8px（和圆角半径一致），向上偏移8px刚好对齐上方元素的底部
   • 背景色和页面背景保持一致（这里假设是白色，若背景是其他颜色，替换bg-white即可）
   • 给伪元素设置右下角全圆角（rounded-br-full），刚好覆盖h3的左上角直角，视觉上形成内凹效果

灵活优化方案： #

如果需要统一管理圆角大小，避免硬编码数值，可以自定义Tailwind变量：

<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
  theme: {
    extend: {
      borderRadius: {
        'custom': '8px', // 自定义圆角大小
      },
      '--radius-size': '8px', // 同步圆角变量
    },
  }
}
</script>
<div class='flex flex-col justify-end'>
  <p class='bg-gray-800/75 rounded-b-none rounded-custom px-1 mr-auto'>2023</p>
  <h3 class='bg-gray-800/75 rounded-tl-none rounded-custom px-1 mr-auto relative before:absolute before:-top-[var(--radius-size)] before:left-0 before:w-[var(--radius-size)] before:h-[var(--radius-size)] before:bg-white before:rounded-br-full'>
    Freelance
  </h3>
</div>

这样后续修改圆角大小的时候，只需要改一处变量值即可，不用调整伪元素的尺寸和偏移。

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