关于反border-radius,虽然大概知道应该怎么实现,但是真上手写还是写不出来,这里简单记录一下
.header-after {position: absolute;right: 0;bottom: 0;width: 20px;height: 20px;background: white;border-radius: 50%;transform: translate(10px, 10px);&-after {position: absolute;right: 0;bottom: 0;width: 20px;height: 20px;background: rgba(232, 231, 237);border-radius: 50%;transform: translate(10px, -10px);}}
大致逻辑就是,先造一个白色的底,20 * 20的圆,放在卡片后面,再用另一个与背景色相同的灰色圆,对上面的白色进行覆盖,使得白色只露出我们需要的部分,也就是border-radius除去之后剩下的部分
