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.

Der hier verwendete Code

<style> *{ margin:0; padding:0; } nav{ width: 50%; border-top: solid 70px #037CA9; border-left: solid 130px transparent; border-right: solid 130px transparent; position: relative; margin: 0 auto; } nav:before{ content:''; position:absolute; top:-70px; width:200%; margin-left:-50%; height:30px; background:#037CA9; display:inline-block; } nav>ul li{ position:relative; float:left; top:-30px; left:0; width:33%; text-align:center; list-style:none; color:white; font-size:25px; cursor:pointer; } </style> <nav id="trapezium-border"> <ul> <li>home</li> <li>home 2</li> <li>home 3</li> </nav>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!