如何用CSS自定义Material Tooltip尖角边缘？border-radius设置未达预期

失效原因梳理 #

• 圆角值语法匹配方向错误
  CSS border-radius 四值语法的赋值顺序为：左上圆角值 → 右上圆角值 → 右下圆角值 → 左下圆角值。你当前编写的border-radius: 100px 0px 0px 100px，实际是给左侧上下两个角设置了100px的大圆角、右侧两个角设置为锐利直角，和“左侧边缘完全锐利”的需求完全反向。
• 样式选择器匹配不到真实元素
  Angular Material 9 及以上版本接入MDC组件体系后，Tooltip 实际渲染的类名从旧版.mat-tooltip替换为.mat-mdc-tooltip，内置样式对元素设置了固定的4px全圆角规则。你仅针对旧类名编写的覆盖规则，因为没有匹配到真实的Tooltip DOM节点，规则完全不会生效，这也是你无论怎么调整圆角值，最终始终看到全圆角展示效果的核心原因。

正确实现代码 #

替换原有自定义样式为以下内容，即可实现左侧锐利、右侧大圆角的参考效果：

/* 同时兼容新旧版本Tooltip类名，穿透组件样式隔离 */
::ng-deep .mat-mdc-tooltip,
::ng-deep .mat-tooltip {
  background-color: red;
  /* 对应左上0、右上100px、右下100px、左下0，实现左侧完全锐利、右侧大圆角 */
  border-radius: 0 100px 100px 0 !important;
}

/* 同步调整Tooltip配套指向箭头的圆角，避免和主体圆角不匹配 */
::ng-deep .mat-mdc-tooltip::after,
::ng-deep .mat-tooltip::after {
  border-radius: 0 8px 8px 0;
}

效果参考 #

适配注意事项 #

• 若你的项目为Angular 15+ 版本，独立组件开启了严格样式隔离，上述带::ng-deep的规则需要写在对应组件的样式配置中，才能穿透隔离生效
• 若需要调整Tooltip的圆角方向，只需按顺序修改四个位置的圆角值即可，无需额外改动其他规则
• 不建议在全局样式中无范围限定地写入上述Tooltip样式，避免对项目内所有Tooltip造成非预期的样式污染

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