Wie Navigation Bar drehen & verschieben, aber Texte/Icons auslassen?

  • Ich versuche zurzeit, die Navigation Bar beim Standard-Stil per CSS zu verändern. Statt des normalen grauen rechteckigen Hintergrundes möchte ich diesen gerne an der Unterseite mit einer Schräge versehen. Leider passt das Ergebnis noch nicht.


    Mein Ansatz ist wie folgt:


    Was funktioniert:

    • Navbar ist etwas größer (damit man sie drehen kann, ohne dass links oder rechts nichts mehr zu sehen ist)
    • Breadcrumbs werden (wieder) gerade dargestellt


    Was nicht funktioniert:

    • Die Navbar müsste ein paar Pixel nach oben verschoben werden, damit links keine weiße Fläche mehr zu sehen ist und sie hinter dem Header verschwindet
    • Die Navbar Icons sollen nicht rotiert werden (aber mit der Auszeichnung unter .pageNavigationIcons -- wie oben -- klappt es nicht)


    Was mache ich falsch?


    Anbei noch der Versuch, mein Problem grafisch darzustellen.


    Und: Natürlich schließe ich auch nicht aus, dass mein Ansatz oben generell anders/besser realisiert haben kann. Aber ich dachte mir, mit border-bottom loszulegen könnte vielleicht ein guter Start sein...

  • Wie wäre es, wenn du einfach ein Hintergrundbild einsetzen würdest, welches diese Schräge hat?

  • Hintergrundbild einsetzen

    Ich würde es gerne rein mit CSS realisieren, damit keine zusätzliche Bild-Dateien geladen werden müssen. Das finde ich irgendwie "sauberer".

  • Ich würde es gerne rein mit CSS realisieren, damit keine zusätzliche Bild-Dateien geladen werden müssen. Das finde ich irgendwie "sauberer".

    Könntest es auch mit ner svg Datei realisieren.

    Probier ansonsten mal das:

    Code
    .pageNavigation {
        height: 0;
        border-width: 150px 100vw 0px 0px;
        border-style: solid;
        border-color: rgba(236, 239, 241, 1) transparent rgba(236, 239, 241, 1) transparent;
    }

    Edited once, last by Aze ().

  • Kann mann nicht einfach das layoutBoundary von der pageNavigation um den gleichen Betrag zurückdrehen? So wie im Anhang?!


    Kann man wohl wenn es so sein soll wie auf dem Bild.



    Edited 2 times, last by SwPotsdam ().

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!