如何用CSS实现导航栏顶部的异形徽章？

我想在导航栏（navbar）中添加一个如下样式的徽章：

当前实现方案 #

我用两个div来实现，一个在上一个在下，下方的div用来做圆角效果，但这个方案效果不好，还太繁琐。

问题 #

有没有更优质、更简洁的实现方式？恳请帮忙解答。

提前致谢，Max

当前代码 #

CSS

* {
  margin: 0;
  padding: 0;
  font-family: Verdana,Geneva,sans-serif; 
}
body {
  background-color: #f1f1f1;
}

nav {
  height: 80px;
  background-color: white; 
  padding:10px 80px;
  box-sizing: border-box;  
  display: flex;
  justify-content: space-between;
}

.badge-top {
  background: #ccc; 
  margin-top:-10px;
  height:25px; 
  padding-top:20px; 
  padding-left:5px;
  padding-right:5px;  
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
  font-size:0.8rem; 
  font-weight:bold; 
  width:30px; 
  text-align: center;  
}

.badge-bottom {
  background: #ccc; 
  color:#ccc; 
  border-radius:50px; 
  margin-top:-10px;
}

.badge-bottom:after {
  content: '.';
}

HTML

<nav>
  <div>logo</div>
  <div>
    <button class="btn nav-btn">SUBMIT</button>    
  </div>
  <div>
    <div class="badge-top">123</div>
    <div class="badge-bottom"></div>
  </div>
</nav>

优化方案：单个元素实现 #

只用一个元素就能实现所需样式，通过CSS精准控制圆角和内边距，无需额外嵌套元素。

优化后代码 #

CSS

* {
  margin: 0;
  padding: 0;
  font-family: Verdana, Geneva, sans-serif;
}
body {
  background-color: #f1f1f1;
}

nav {
  height: 80px;
  background-color: white;
  padding: 10px 80px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center; /* 垂直居中导航内容 */
}

.badge {
  background: #ccc;
  margin-top: -10px;
  padding: 20px 5px 10px; /* 上下内边距调整，适配文本位置与底部圆角 */
  width: 30px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);
  /* 仅设置底部两个角为圆形，顶部保持直角 */
  border-radius: 0 0 50px 50px;
}

HTML

<nav>
  <div>logo</div>
  <div>
    <button class="btn nav-btn">SUBMIT</button>
  </div>
  <div class="badge">123</div>
</nav>

方案说明 #

• 用单个.badge元素替代原有两个div，通过border-radius: 0 0 50px 50px直接实现顶部直角、底部圆角的形状，完全匹配需求样式。
• 调整padding值让文本位置更贴合原设计，同时保证底部圆角区域的显示空间。
• 给导航栏添加align-items: center，让所有导航内容垂直居中，布局更规整。

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