如何在背景为动态的图像中使0附近的边框变为现实，并且我需要气泡的切割部分透明

Question

 .square { border: 2px solid #000; border-radius: 5px; color: #000; display: inline-block; font-weight: 600; padding: 0 6px; position: relative; } .square:before { border-left: 10px solid transparent; border-right: 0 solid transparent; border-top: 10px solid #000; bottom: -10px; content: ''; display: block; height: 0; position: absolute; transition: all 0.25s linear 0s; right: 0; width: 0; } 

 <div class="square"> 0 </div> 

In the shown image i want to achieve the border around the zero using css only. I tried this but i want hollow arrow so help me out.
I tried speech bubble but in my case background is dynamic and I need the the cutting part of bubble to be transparent

Answer 1

Try This:

 .parent { display: inline-block; background-color: #339FFF; padding: 15px; } .child { background-color: transparent; width: 30px; height: 30px; position: relative; border:3px solid #FFF; text-align: center; color: #FFF; line-height: 30px; } .child:before{ content: ''; border-top: 5px solid #339FFF; border-left: 5px solid #FFF; width: 0; height: 0; position: absolute; bottom: -5px; right: 0px; z-index: 1; } .child:after { content: ''; border-top: 10px solid #fff; border-left: 10px solid #339FFF; width: 0; height: 0; position: absolute; bottom: -13px; right: -3px; } 

 <div class="parent"> <div class="mask"> <div class="child">0</div> </div> </div>