css优惠卷缺口的实现问题

本次的缺口问题通过了比较取巧的问题来实现

这里个给出一个简单的效果图 不喜勿碰

<div class="div1"></div>
<div  class="div2"></div>

/*通过两个元素的拼接 然后各自设置两个角的缺口再实现*/


<style>
    .div1{
 
        width: 400px;
        height:100px;
	mask: 
		radial-gradient(circle at 0 100%, transparent 20rpx, red 0), 
		radial-gradient(circle at right 100%, transparent 20rpx, red 0); 
	mask-composite: source-in;
    }
    .div2{
            width: 400px;
            height:100px;
            mask:
                    radial-gradient(circle at 0 0, transparent 20rpx, red 0),
                    radial-gradient(circle at right 0, transparent 20rpx, red 0);
            mask-composite: source-in;
    }
</style>