css实现内圆角

思路很简单，就是父容器相对定位"position:relative"，父容器内添加4个div，分别定位到父容器四个角，样式写成圆形，代码如下：

 <div class="conMsg">
   <div class="circle leftTop"></div>
   <div class="circle rightTop"></div>
   <div class="circle leftBottom"></div>
   <div class="circle rightBottom"></div>
</div>

.conMsg {
    position: relative;
    width: 200px;
    height: 200px;
    background: linear-gradient(132deg, #fe9a51 0%, #f95638 49%, #ff8b46 100%);
}
.circle {
    position: absolute;
    width: 24px;
    height: 24px; 
    border-radius: 12px;
    background: #fff;
}
.leftTop {
    left: -12px;
    top: -12px;
}
.rightTop {
    right: -12px;
    top: -12px;
}
.leftBottom {
    left: -12px;
    bottom: -12px;
}
.rightBottom {
    right: -12px;
    bottom: -12px;
}

效果如下：