css实现内凹圆

设计给了一张图

第一反应是用两个圆直接覆盖，形成两个缺角，但写着写着发现实现不了，这种方法只适用于背景是纯色的 ，有透明色或者渐变都不行。所以换一个方法，实现如下。

css

    .box{
            width: 300px;
            height:200px;
            position: relative;
            background: linear-gradient(#ff0,#ffa,#f00);
        }
        .content{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 200px;
            height: 100px;
             /* 20px center 设置渐变圆心
            transparent 0%, transparent 20px,表示半径20px的圆是透明色
            #fff 20px 表示半径20px以外为白色
            -20px 背景左移20px，这边是因为设置的透明圆半径是20px，所以设为-20px,如果大小有其他需求自行更改 */
            background: radial-gradient(circle at 20px center, transparent 0%, transparent 20px, #fff 20px) -20px;
            border-radius: 16px;
            z-index: 12;
        }

html

<div class="box">
    <div class="content">
    </div>
</div>

效果：