优雅解决 css 缺口问题
在制作缺口时，使用遮罩（mask）存在需要逐个创建遮罩层图片的繁琐问题。本文将介绍一种优雅的解决办法。
解决方案：mask-composite
可以使用 mask 中的 mask-composite 来实现所需效果。
- 创建渐变背景： 使用线性渐变创建一个纯色背景。
- 制作凹角 SVG： 使用 SVG 图片制作缺口形状，并将其定位在右侧。
- 合成遮罩： 使用 mask-composite: xor 选项，只显示不重合的部分。
- 定位和重复： 使用 mask-position 和 mask-repeat 选项分别调整凹角位置和背景重复方式。
代码示例：
立即学习“前端免费学习笔记（深入）”；
-webkit-mask: url('凹角.svg'), linear-gradient(red,red);
-webkit-mask-composite: xor;
-webkit-mask-position: right 30px, 0 0;
-webkit-mask-repeat: no-repeat, repeat;演示：
通过自定义属性控制右侧箭头上下位置：
[演示链接](https://codepen.io/xboxyan/pen/QWJQLwp)
技巧扩展：
之前的文章《CSS mask 实现鼠标跟随镂空效果》中也介绍了相关的技巧，可供参考。
