思路很简单,就是父容器相对定位"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; }
效果如下: