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
<!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
[/FONT][/COLOR][COLOR=#3B3B3B]:root{[/COLOR] --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); [COLOR=#3B3B3B]}[/COLOR][COLOR=#000000][FONT=verdana][/FONT][/COLOR]http://prntscr.com/km5tnl
