Dreieckige Aufzählungszeichen

Zuletzt aktualisiert: Mittwoch, 11. Januar 2017 Geschrieben von Jan Pionzewski

Aufzählungslisten müssen nicht immer mit runden Bulletpoints versehen werden. Mit Hilfe von CSS kannst du die einzelnen Aufzählungszeichen beliebig gestalten. So ist es natürlich auch sehr einfach möglich, dreieckige Bulletpoints zu erstellen. In diesem Artikel erkläre ich, wie das funktioniert.

 

 

Dreieckige Aufzählungszeichen mit CSS

Um dreieckige Aufzählungszeichen zu erstellen, muss lediglich nachstehender CSS-Code in dein Stylesheet eingebunden werden. Danach werden auf der Website alle Aufzählungszeichen dreieckig dargestellt.

 

Code-Beispiel:

ul {
    margin: 0.75em 0;
    padding: 0 1em;
    list-style: none;
}

li:before {
    content: "";
    border-color: transparent #111;
    border-style: solid;
    border-width: 0.35em 0 0.35em 0.45em;
    display: block;
    height: 0;
    width: 0;
    left: -1em;
    top: 0.9em;
    position: relative;
}

 

Anzeigebeispiel ansehen

 

Browser-Kompatibilität

Dieses Script wurde von mir in folgenden Browsern getestet:

  • Google Chrome 32
  • Firefox 27
  • Internet Explorer 11
  • Opera 19
  • Safari (iPhone-Version, iOS 7.0.5)


In den genannten Browsern funktionierte das Script einwandfrei. Ich kann darüber hinaus leider nicht versichern, dass dieses Beispiel auch in älteren Browser-Versionen oder hier nicht aufgeführten Browsern funktioniert.

 

 

Kommentar schreiben