① 结束antd 源码篇
React 的系统类项目中，antd 组件应用非常广泛，前面几篇文章展开了一些比较重要的组件，后面剩余的组件类（包括数据展示，反馈，其他）核心的源码应用和前面无太大差异，这里选取一个三角形箭头样式的源码，以此结束这个系列的文章。
② 三角形箭头的应用
前面说过，rc-trigger 是一个非常重要的组件，可用于任意元素监听事件来弹出自定义框层。
而弹出来的自定义框，从设计角度来说，很有必要有个指示性的来源箭头，所以 antd 就有了各种的应用情况：
③ 如何用css实现三角形箭头
一般的常规css做法，实现三角形箭头，我们都会想到用 border：
因为设置 content 的宽高为0， 所以内聚的短边会压缩成箭头，有这样的效果：
所以，你想要哪个方向的三角形，就可以设置其他方向的 border 为透明即可：
④ 再看看 Tooltip 如何实现
因为 Tooltip 引用的是 rc-tooltip, 直接看到箭头核心代码的部分：
可以看到，这个弹出来的 popup, 如果设置了显示箭头 showArrow，会设置一个 arrow 的元素，和 content 是分开的，这也符合我们的猜想。
但是它的 arrow 元素里，会放入一个外部的 arrowContent，这里找到传入的元素：
好了，这里再查看一下具体的样式，包括外面的 arrow, 里面的 arrow-content：
看不明白的话，直接F12看一下实例：
可以看到，里面的 arrowContent 其实是 rotate 旋转了45度的正方形：
再通过外面的 arrow 一层，hidden了对角线的另一部分，实现了三角形箭头的展示。同时用实体元素设置了 box-shadow 阴影效果，符合设计要求。
那如果用 css 的 border 实现的三角形上加上阴影效果呢？
肯定会是你不想看到的（这里用蓝色增强了效果）：
⑤ 总结一下
antd 的各个组件源码看起来其实尚算清晰，但实质上存在很多耦合的地方，而 react-component 貌似脱离了样式解耦了一层核心功能，但在我看来，也只不过将外面的裤子脱掉而已。
不过总体上看，还是有很多值得参考的地方，虽然全局样式一直被诟病，但也是有它自身的考虑和存在的价值。
