你好！要实现这种带圆角的尖端效果，咱们可以放弃用border绘制硬角三角形的方法，改用旋转带圆角的小矩形来模拟，这样既能得到圆润的尖端，还能保持和气泡一致的阴影效果。

改进后的完整代码 #

CSS部分

.notif {
  display: block;
  height: 35px;
  background: #E95950;
  color: #fff;
  -webkit-filter: drop-shadow(0px 0px 5px rgba(233, 89, 80, 0.6));
  filter: drop-shadow(0px 0px 5px rgba(233, 89, 80, 0.6));
  position: absolute;
  top: 30px;
  left: 30px;
  border-radius: 7px;
}
/* 修改后的尖端样式 */
.notif:after {
  content: '';
  width: 16px;
  height: 16px;
  background: #E95950;
  border-radius: 3px;
  position: absolute;
  left: 25%;
  top: -8px;
  transform: translateX(-65%) rotate(45deg);
}
.notifItem {
  display:inline-block;
  color: #fff;
  font-family: sans-serif;
  font-weight: 600;
  padding: 8px 5px;
  margin-right: 0px;
}
.notifItem:first-child {
  margin-left: 8px;
}
.notifItem:last-child {
  margin-right: 8px;
}

HTML部分（无需修改）

<div class="notif">
  <div class="notifItem">33</div>
  <div class="notifItem">2</div>
  <div class="notifItem">5</div>
</div>

思路说明 #

• 用一个16×16px的矩形替代原来的border三角形，通过border-radius: 3px给它添加圆角，这个数值和气泡的7px圆角比例协调，视觉上更统一
• 通过rotate(45deg)将矩形旋转成菱形，刚好形成气泡的尖端形状
• 调整top: -8px（矩形高度的一半），让菱形的下半部分和气泡顶部完美衔接，再用translateX(-65%)保持你原来的尖端水平位置
• 气泡的drop-shadow滤镜会自动作用到伪元素上，所以尖端会和气泡保持一致的阴影效果，不用额外处理

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