MrMurphy1: <nav> innerhalb von <nav> oder doch lieber ul li ul li?

Beitrag lesen

Hallo

Kannst du mir vielleicht ein Tipp geben wie ich den Pfeil hinbekomme? Vielleicht ein DIV mit 50x50px und dieses etwas drehen?

Welches Element du verwendest ist egal. Du kannst also dein div nehmen, ich habe mal ein Beispiel mit einem h3-Element erstellt.

HTML

<h3 class="bubble">Container mit Pfeil nach oben</h3>

und das CSS

      .bubble {
         background: #fff101;
         display: inline-block;
         position: relative;
         padding: 10px;
         border: 4px solid #F200FF;
         border-radius: 5px;
      }
      .bubble::after,
      .bubble::before {
         bottom: 100%;
         left: 50%;
         content: " ";
         height: 0;
         width: 0;
         position: absolute;
         border: solid transparent;
      }
      .bubble::after {
         border-bottom-color: #fff101;
         border-width: 30px;
         margin-left: -30px;
      }
      .bubble::before {
         border-bottom-color: #F200FF;
         border-width: 36px;
         margin-left: -36px;
      }

Die Farben kannst du natürlich noch anpassen. Oder die Klasse einfach deinem div zuordnen.

Gruss

MrMurphy