如何正确自定义antd组件库Tooltip的三角箭头样式

• 此前已调试完成纯CSS实现三角形作为Tooltip提示框箭头的方案，在非组件库的普通页面场景下测试，箭头和提示框完全贴合，样式表现正常。
• 当前项目使用antd组件库提供的Tooltip组件，组件默认的箭头样式不符合设计要求，因此计划复用之前验证通过的CSS三角形方案，替换Tooltip默认箭头，达到和之前示例一致的效果。
• 参考原有方案编写的样式调试代码已上传至CodeSandbox，核心调试逻辑位于demo.js文件中。

直接套用原有CSS三角形方案后，出现了普通场景下不存在的两个样式问题：

• Tooltip的三角形箭头尖角长度过长，尺寸不符合预期
• 箭头和Tooltip内容框的衔接位置（下边框处）存在明显白色缝隙，无法完全贴合

• 定位相同CSS写法在antd Tooltip场景下出现样式异常的根本原因
• 提供适配antd Tooltip的三角形箭头正确实现方式，解决尖角过长、衔接缝隙的问题

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