XHTMLforum - Css Trapezförmige Navigationbar

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Css Trapezförmige Navigationbar (http://xhtmlforum.de/showthread.php?t=73594)

Css Trapezförmige Navigationbar

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

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

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.

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

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.

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

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

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