如何用CSS实现带角标数字与内部内容的圆角自定义图形？

实现思路 #

• 容器基础布局：设置固定宽高、背景色，指定border-top-right-radius和border-bottom-left-radius实现主体圆角效果，同时开启box-sizing: border-box保证内边距不撑大容器。
• 角部数字徽章：通过绝对定位将徽章容器移出主体左上角，设置独立宽高、背景色和圆角，使用Flex布局实现数字垂直水平居中。
• 内部内容适配：给容器添加内边距，同时给内容区域设置上外边距，避免内容被角标遮挡。

完整代码 #

CSS部分

.container {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #f2f2f2;
  border-top-right-radius: 80px;
  border-bottom-left-radius: 80px;
  padding: 20px;
  box-sizing: border-box;
}

.corner-badge {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 100px;
  height: 100px;
  background-color: red;
  border-top-left-radius: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.number {
  color: #ffffff;
  font-size: 24px;
  font-weight: bold;
}

.content {
  margin-top: 20px;
  color: #333;
  line-height: 1.6;
}

HTML部分

<div class="container">
  <div class="corner-badge">
    <span class="number">1</span>
  </div>
  <div class="content">
    这里可以添加任意内部内容，比如文本、图标或其他元素。
  </div>
</div>

扩展说明 #

• 如果需要调整角标位置（如右上角、右下角），只需修改corner-badge的top/right/bottom/left属性，同时对应调整圆角（如右上角用border-top-right-radius）。
• 角标和容器的圆角大小可根据需求自行修改数值，保持视觉协调即可。

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