problem description
  as shown in the figure, the same css results in different positions of triangles 
the environmental background of the problems and what methods you have tried
related codes
/ / Please paste the code text below (do not replace the code with pictures)
.info-label {
        display: inline-flex;
        outline: 1px solid -sharp1cc0da;
        color: -sharp1cc0da;
        padding: 1px 4px;
        position: relative;
        margin-left: 6px;
        font-size: 10px;
        justify-content: center;
        align-items: center;
        &:after {
          position: absolute;
          display: block;
          content: "";
          width:0;
          height:0;
          border-width:0 0 4px 4px;
          border-style:solid;
          border-color:transparent transparent -sharp1cc0da transparent;
          bottom: -1px;
          left: -4px;
          z-index: 1;
        }
      }
