语义ui功能区边缘已倒置，仅在右侧正确工作

Question

如您所见，色带下方的小三角形边缘被反射-意味着直角应在另一侧。当我使用dir =“ rtl”-翻转方向时它可以正常工作时，我不能在左侧使用它。

<div v-if="isRunning" class="ui four wide column" >
           <div class="ui blue attached basic label ribbon" dir="ltr"> REMAINING SECONDS </div>
          <div class="ui label massive fluid ">
              {{remainingSeconds}}
            </div>
      </div>

下面是正确使用功能区标签的演示。

如何使其正常工作？