如何通过CSS实现底部正方形内的心跳线镂空效果？

实现结论 #

完全可以通过CSS实现该效果，常见有两种成熟的实现方案：

方案1：使用CSS mask 遮罩属性（推荐） #

这是最省心的实现方式：

• 你可以先准备一张PNG格式的遮罩素材，整体背景为不透明的纯色，只有需要镂空的心跳线区域为透明
• 给底部的绿色正方形元素添加mask属性，引入该遮罩素材即可，遮罩的透明区域会对应让绿色方块的对应位置变透明，刚好实现镂空效果
• 如果需要更高清的效果，也可以把心跳线轮廓做成SVG格式作为遮罩源，不会出现拉伸模糊的问题
• 该属性兼容性覆盖绝大多数主流浏览器，仅不支持旧版IE浏览器

方案2：使用CSS clip-path 裁剪属性 #

如果不想额外引入素材，也可以用纯代码实现：

• 把需要镂空的心跳线外轮廓转换成坐标参数，写入clip-path属性中，直接裁剪绿色方块，仅保留你需要显示的区域，镂空位置自然就会透出下层的内容
• 如果手动编写路径参数比较麻烦，也可以用可视化的clip-path生成工具，导入心跳线造型直接导出可用的CSS代码

如果你需要实现动态的心跳滚动效果，只需要给上述两个属性加对应CSS动画，调整遮罩位置或者路径参数即可实现。

参考效果图：

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