html - 我怎样才能使背景为动态的图像中显示的 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>