html - css 怎么设置挖这个缺口？

Question

我考虑到用mask遮罩，但是遮罩只会把遮罩元素有像素的地方显示，这样对每个setp都要做一个遮罩层图片。
如果mask可以设置为有像素的地方不显示那就完美了。

不知道有没有什么优雅的解决办法。

Answer 1

可以用mask里面的遮罩合成mask-composite来实现。

简单来说，用一个纯色渐变背景减去右侧的凹角。这个凹角比较特殊，可以考虑用 svg 图片，然后在改变 step 时改变这个凹角的位置就行了

示意代码如下

-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;

下面是一个demo，可以直接通过自定义属性来控制右边箭头的上下位置

https://codepen.io/xboxyan/pen/QWJQLwp

之前在这篇文章中也有相关技巧：CSS mask 实现鼠标跟随镂空效果

Answer 2

简单点。用img图片。