どのように私は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>