Css Trapezförmige Navigationbar

Homerlator · #1 (**permalink**) 23.08.2018, 21:21

Guten Tag,

ich bin ein blutiger Css-Anfänger, ich habe eine Navigationsbar designt. Es funktioniert soweit, aber bitte um verbesserungs Vorschläge was den code betrifft. Denn so wie ich es gelöst habe gibt es Probleme dabei einen Schatten einzufügen.

HTML-Code:

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <link rel='stylesheet'  href='style.css' type='text/css' media='all' />
     </head>

    <body>
    <div class="container-accent"></div>
    <div class="container"></div>
    <div class="placeholder"></div>
    </body>
</html>

Code:

:root{
    --navbar: #305769;
    --accent: #578A98;
    --background: #183B4C;
}

body{
    background-color: var(--background);
    margin: 0;
}

.placeholder{
    float: left;
    height: 3vh;
    width: 100vw;
    background: var(--navbar);
    border-bottom: 0.5vh solid var(--accent);
}

.container{
    position: absolute;
    border-top: 7vh solid var(--navbar);
    border-left: 7vh solid transparent;
    border-right: 7vh solid transparent;
    height: 0;
    width: 50vw;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0);
    z-index: 2;
}

.container-accent{
    content: '';
    position: absolute;
    top: 3.1vh;
    border-top: 4.3vh solid var(--accent);
    border-left: 4.3vh solid transparent;
    border-right: 4.3vh solid transparent;
    height: 0;
    width: 50.4vw;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0);
}

http://prntscr.com/km5tnl

basti1012 · #2 (**permalink**) 25.08.2018, 19:37

Du machst gewaltig was falsch. Du postest dein Problem im jeden Forum. Da wird dir irgendwann keiner mehr helfen weil man sowas nicht macht. Versuche in Zukunft dich auf ein Forum zu konzentrieren. Da das Thema hier noch nicht gesperrt ist kann man dir ja nur noch hier helfen. Ich habe dir schon im anderen Forum geschrieben. Mach doch mal ein paar Links in der navigation rein damit man das alles besser sieht und wobei hast du den probleme mit den Schatten ? Wie soll das den aussehen

Homerlator · #3 (**permalink**) 25.08.2018, 22:33

Okay entschuldige, sowas kommt nicht mehr vor.

Also wenn ich ein Schatten einfügen will sieht das so aus: http://prntscr.com/kmupd0

Aber der Schatten soll natürlich sich an das Trapez anpassen und nur links, rechts und unten sein.

Mein Code (CSS):

Code:

:root{
    --navbar: #305769;
    --accent: #578A98;
    --background: #183B4C;
}

body{
    background-color: var(--background);
    margin: 0;
}

.placeholder{
    float: left;
    height: 3vh;
    width: 100vw;
    background: var(--navbar);
    border-bottom: 0.5vh solid var(--accent);
}

.container{
    position: absolute;
    border-top: 7vh solid var(--navbar);
    border-left: 7vh solid transparent;
    border-right: 7vh solid transparent;
    height: 0;
    width: 50vw;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0);
    z-index: 2;
}

.container-accent{
    content: '';
    position: absolute;
    top: 3.1vh;
    border-top: 4.3vh solid var(--accent);
    border-left: 4.3vh solid transparent;
    border-right: 4.3vh solid transparent;
    height: 0;
    width: 50.4vw;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}

Ich hoffe es ist verständlich und du kannst mir helfen.

basti1012 · #4 (**permalink**) 25.08.2018, 23:44

Achso jetzt weiß ich was du meinst. Ich glaube das wird schwer weil du ja da nur border hast. Ich kann das jetzt nicht erklären. Ich werde das mal versuchen,aber ob das klappt weiß ich nicht

Homerlator · #5 (**permalink**) 25.08.2018, 23:48

Das meinte ich mit Verbesserungsvorschläge für den Code.
Ich hätte da noch eine Frage: Kann man die ganze Navbar als ein Div-container machen? Zurzeit sind es ja vier.

basti1012 · #6 (**permalink**) 26.08.2018, 20:59

Also um bei dir überall einen richtigen schatten zu machen wird man bestimmt noch mehr conntainer brauchen. Auf der schnelle finde ich da jetzt keine Lösung.
Alles in ein Container zu machen ,ohne schatten ,das geht mit etwas fummeln ja
https://codepen.io/basti1012/pen/RYawZv?editors=1100

Aber das mit schatten muß ich auch erstmal überlegen wie man das mit wennig container hinbekommen kann

basti1012 · #7 (**permalink**) 26.08.2018, 22:48

Naja wird ehr mehr container
mit bischen mehr zeit könnteman das bestimmt auch perfekt machen ,aber die fehlt mir jetzt.
Aber wie du siehst man könnte es auch mit border machen
https://codepen.io/basti1012/pen/NLNPXa

cloned · #8 (**permalink**) 27.08.2018, 08:04

Warum wird hier nicht (am besten wäre doch) ein SVG als Hintergrundbild verwendet?

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Redesign für Steiner Cycling Team	pkipper	Site- und Layoutcheck	11	09.02.2011 12:25
Einbindung von frei erhältlichen Scripten - CSS Problem	DonL	CSS	1	22.01.2011 16:09
MYspace mehr als nur CSS oder ?	Vinceone	CSS	0	12.07.2007 02:21
Eric Meyer's CSS	Petty	Ressourcen	0	21.11.2005 08:18
Mozilla ignoriert externes css	DarkWanderer	CSS	9	22.09.2005 11:39