如何让使用clip-path的tooltip底部也实现border-radius圆角（禁用伪类）？

你的问题出在clip-path的多边形裁剪直接切掉了底部区域，导致border-radius无法作用在底部两个角。不用伪类的话，可以通过自定义clip-path路径来同时实现箭头和全圆角效果，同时保留渐变背景。

修正后的代码： #

.wrapper {
  display: inline-block;
  color: white;
  border-radius: 5px;
  /* 用path绘制带圆角和箭头的形状，四个角都是5px圆角，底部箭头居中 */
  clip-path: path('M5,0 Lcalc(100% - 5px),0 C100%,0 100%,5 100%,5 L100%,calc(100% - 15px) C100%,calc(100% - 15px) calc(100% - 5px),calc(100% - 10px) calc(100% - 5px),calc(100% - 10px) Lcalc(50% + 10px),calc(100% - 10px) L50%,100% Lcalc(50% - 10px),calc(100% - 10px) L5,calc(100% - 10px) C0,calc(100% - 10px) 0,calc(100% - 15px) 0,calc(100% - 15px) L0,5 C0,5 0,0 5,0 Z');
}

.container {
  padding: 8px 8px 17px;
  background: linear-gradient(to right, #000 39%, transparent 39%, transparent 61%, black 61%) no-repeat, linear-gradient(to bottom, rgba(15,15,15,0.8) 0%, blue 100%);
  background-size: 100% 1px, 100%;
}

<div class="wrapper">
  <div class="container">
    <h1>Content</h1>
  </div>
</div>

关键说明： #

• 替换clip-path为path()：用SVG路径语法绘制完整形状，四个角都设置了5px的圆角（对应border-radius的值），同时保留底部居中的箭头。路径中的C命令用来绘制贝塞尔曲线实现圆角，完美匹配border-radius的效果。
• 移除重复的clip-path：只需要在wrapper上设置一次clip-path即可，不需要给container也加，避免双重裁剪导致样式异常。
• 保留原有渐变背景：你的渐变背景设置可以完全保留，新的clip-path不会影响渐变的显示。

这样修改后，tooltip的四个角都会呈现border-radius:5px的圆角效果，同时底部箭头也能正常显示，且不需要使用任何伪类。

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