CSS-Problematik

Hallo zusammen, ich habe ein Problem mit einem Quellcode und finde um himmelns willen nicht heraus wo der Fehler liegt.
Ich möchte ein Left-Triangle mit borders machen, so weit so gut, aber im Endeffekt sieht es so aus:

Es soll übrigens nur CSS verwendet werden. Genau so möchte ich mit borders arbeiten und nicht "content"

.li .textlink{
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-right: 10px solid black;
  border-bottom: 7px solid transparent;
}

        <div class="li">
          <a href="#"><img src="bilder/pict_bekleidung.gif" alt="Bekleidung" height="80" width="114"></a> 
          <a href="#" class="textlink">Bekleidung</a>
        </div>

Danke.

Zitat von Yannik

Code

.li .textlink {
    border-color: transparent black transparent transparent;
    border-style: solid;
    border-width: 10px 20px 10px 0;
    float: left;
    height: 0;
    margin: 0 10px;
    width: 0;
}

Guck mal ob das für dich passt.

Leider nicht, es sieht nun so aus:

Zitat von Sintact | Max

Maybe mal:
border-left: 0 solid transparent;
probieren.

Tatsächlich ist border-left nicht nötig. Also sozusagen ändert es nichts an dem triangle

Hab ich auch schon ausprobiert und dann mit padding versucht die border mehr zu verschieben, aber sobald ich padding bottom oder top benutzt habe, sah es wieder wie vorher aus.

Mit display: inline-block würde es so aussehen

Zitat von Fantasy

Gibt es einen Grund wieso du nicht mit content arbeiten möchtest?

Mit content ist meiner Meinung nach der simpelste Weg.

[IMG: https://i.imgur.com/5tLN5K6.png]

Ja, es ist der simpleste weg, ich weiß.
Ich möchte es mit borders machen, weil es anscheinend laut meiner dozentin auch funktioniert.

Zitat von Sintact | Max

Zitat von Scripze

Hab ich auch schon ausprobiert und dann mit padding versucht die border mehr zu verschieben, aber sobald ich padding bottom oder top benutzt habe, sah es wieder wie vorher aus.

Mit display: inline-block würde es so aussehen

Spoiler anzeigen

[IMG: https://i.ibb.co/R61X00G/image.png]

Probiere vielleicht noch das hier oder ist es ein No-Go weil es Content verwendet:

Code

.textlink::after {
    content: '';
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-right: 10px solid black;
    border-bottom: 7px solid transparent;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
  }

Alles anzeigen

Ich liebe dich