如何在背景為動態的圖像中使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> 

在所示的圖像中，我只想使用css來實現零附近的邊界。 我嘗試了這個，但是我想要空心箭頭，所以請幫幫我。
我嘗試了語音泡沫，但在我的情況下背景是動態的，因此我需要泡沫的切割部分透明

Answer 1

嘗試這個：

 .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>