Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 23.08.2018, 22:21
Homerlator Homerlator ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.08.2018
Beiträge: 3
Homerlator befindet sich auf einem aufstrebenden Ast
Frage 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
Mit Zitat antworten
Sponsored Links