类似卡券的布局请问怎么实现?-灵析社区

云卿山手

像这种卡券的缺口请问如何实现,如果背景是纯色直接定位个纯色上去也就没啥问题,但这种背景渐变的显然不行,请巨佬贴个demo给我学习一下谢谢 ![](https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241105/a15ce1b779c247d241aa0d2398f3abec.png)

阅读量:14

点赞量:0

问AI
用 mask 就可以了 .card{ -webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0) -20px; } "image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241105/f5399e0bd784ea615c55e4b640f70398.png) 可以参考这篇文章:"https://segmentfault.com/a/1190000039742398" (https://segmentfault.com/a/1190000039742398) 还可以用这个工具 "https://coupon.codelabo.cn/" (https://link.segmentfault.com/?enc=TDz5yyDTln5j0DN3%2FYe3Wg%3D%3D.gDTOqZV%2F%2FF4gv691l1o%2BmX1FX6neSQEUa7ZX6VulWKw%3D) "image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241105/d14afaa82d75a7725a67952a433df8b8.png)