关于用 css 实现特定箭头的探讨！

1. 我以前的视频中有一期介绍用 css 实现这样的箭头，有同学提出看到过这样的箭头，那这个箭头如何实现呢？它这里是圆润且有弧度的，是内凹型弧度，与圆角效果不同，弯曲方向也不一样。

2. 这种箭头如何实现？先把这一块单独拿出，想到的实现方式是正方形加圆，这样能否拼凑出图案？主要要这一块图案，但仔细实现会发现有问题，就是单独这一块颜色不好设置。

3. 要设置这一块颜色，就得设置正方形背景，设置后要抠掉这一块颜色，怎么抠？外面背景色好抠，直接 overflow 隐藏就行。怎么抠？只能把圆形背景设成外层一样背景色，这样有抠出效果，来实现一下，先隐藏正方形溢出部分，给圆形加背景，刷新看似乎达到效果。

4. 但有个问题，如果外层不是纯色，比如是图片或渐变，会怎样？来看，加上渐变，刷新发现有问题，这时里面背景色不好设置。

5. 假如外面是图片，更复杂，还有可能里面有滚动，背景完全动态变化，背景设不了，怎么办？可用阴影实现，即 css 里的 boxshadow，怎么实现？把正方形和圆背景去掉，给圆设置阴影，方向朝右上角，设置颜色填充这一块。来实现一下，在圆里加 boxshadow，大小计算或尽量大些，填充颜色即可，去掉圆形和外层正方形背景。

6. 这时看，实现了效果，但不行，这地方是垂直的，再看上面，这一块不是垂直，应是 130 度这样角度，很简单，加上变形就行，里面加上变形，具体角度需几何计算。

7. 变形后就是这样效果，可把它放到上面，再加上一个，就达到圆角箭头效果。

8. 除这种实现方式还有没有其他方式，大家可在评论区留言。