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?

Menu