SOURCE

<!-- https://blog.csdn.net/daocaokafei/article/details/115336372 -->
<!-- https://mp.weixin.qq.com/s/fOHxGMZTSic_HNlgh8OgPg -->

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

<div class="demo2" style="margin-top: 10px">
    测试
</div>

<div class="demo3" style="margin-top: 10px">
    <div class="content"></div>
</div>

.demo1 {
    width: 200px;
    height: 50px;
    display: inline-block;
    /* clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 0); */
    filter: drop-shadow(0 0 1px #333) 
            drop-shadow(0 0 0.5px #333)
            drop-shadow(0 0 0.5px #333)
            drop-shadow(0 0 0.5px #333);
}
.demo1 .content {
    height: 100%;
    -webkit-mask: radial-gradient(circle at left center, transparent 20px, red 20px);
    background: red;
}

.demo2 {
    --bg: linear-gradient(45deg, #ff3c41, #ff9800);
    width: 200px;
    height: 50px;
    display: inline-block;
    text-align: center;
    line-height: 45px;
    filter: drop-shadow(0 0 1px #333) 
            drop-shadow(0 0 0.5px #333)
            drop-shadow(0 0 0.5px #333)
            drop-shadow(0 0 0.5px #333);
}
.demo2::before, .demo2::after {
    content:'';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: var(--bg);
    z-index: -1;
}
.demo2::before {
  clip-path: inset(0 0 5px 0 round 5px);
}
.demo2::after {
  clip-path: polygon(calc(50% - 5px) calc(100% - 5px), calc(50% + 5px) calc(100% - 5px), 50% 100%);
}

.demo3 {
    --bg: linear-gradient(45deg, #ff3c41, #ff9800);
    width: 200px;
    height: 50px;
    display: inline-block;
    text-align: center;
    line-height: 45px;
    filter: drop-shadow(0 0 1px #333) 
            drop-shadow(0 0 0.5px #333)
            drop-shadow(0 0 0.5px #333)
            drop-shadow(0 0 0.5px #333);
}
.demo3 .content {
    height: 100%;
    background: red;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 0);
}