Ich entwerfe gerade eine Navigationsleiste für eine Website mit Bootstrap. Es gibt eine Hauptnavigationsleiste und ein zweiten direkt unter dem ersten, siehe Bild:HTML-Button mit benutzerdefinierten Ecken
ich die Ecken der Taste unten mit einfachen CSS abzurunden verwaltet, sondern für die oberen Ecken würde Ich mag zu erreichen so etwas wie diese:
gibt es eine Möglichkeit, dies in CSS/jQuery oder mit einem zusätzlichen Plugin zu tun?
EDIT:
HTML für die Schaltfläche ist:
<button type="submit" class="btn navbar-btn second-navbar-button">
<span class="mdi mdi-eye second-navbar-icon"></span>
<span class="second-navbar-name"> Overview</span>
</button>
Die CSS für die Schaltfläche wie das Es folgt
.second-navbar-button {
font-size: 26px;
border: none;
background-color: transparent;
color: #ec9f14;
margin: 0 19px 0 19px;
padding: 0px 8px 0px 8px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;}
sieht so Raum zwischen den Tasten ist die Manipulation der Ecken Die nebenstehende Schaltfläche funktioniert nicht, afaik.
Cheers,
Trammy
Ich könnte falsch sein, aber wenn Sie genau hinschauen, die abgerundeten Kanten auf der linken und rechten (oben), könnte eigentlich von abgerundeten Kanten auf den benachbarten Tasten kommen. –
können Sie dies erreichen mit den 'vor 'und' nachher' Pseudo-Element, setzen Sie einen Code, damit ich Ihnen weiter helfen kann –
Danke Anas, ich habe jetzt den CSS-Code für die Schaltflächen hinzugefügt. Ich hoffe, das hilft. – ftramnitzke