Weird problems with CSS layout, as shown in the figure

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;
        }
      }

what result do you expect? What is the error message actually seen?

Css
Apr.20,2022

are you asking for knowledge, not paying people to do the work?

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e5180e-44492.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e5180e-44492.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?