Créer une barre de navigation en CSS

Question

Je veux concevoir un site Web avec une barre de navigation comme this.

Je l'ai déjà essayé avec le rotate-tag de CSS, mais cela ne fonctionne pas.

Est-il possible en CSS de créer une telle barre de navigation avec CSS uniquement ou devrais-je utiliser la balise background-image?

Merci beaucoup.

Answer 1

Hacky, mais travaillant: JSFiddle

mai besoin d'ajustements quand vous la mise en œuvre sur votre site web.

<div id="menu"> 
    <ul> 
     <li>Home</li> 
     <li>Blog</li> 
     <li>About me</li> 
     <li>Contact</li> 
    </ul> 
</div> 

---

body { 
    background-color: gold; 
} 

#menu { 
    background-color: black; 
    color: white; 
    width: 2000px; 
    height: 130px; 
    position: absolute; 
    top: -42px; 
    left: -800px; 
    padding-top: 38px; 
    transform: rotate(-10deg); 
    text-align: center; 
} 

#menu ul { 
    margin-top: 70px; 
} 

#menu li { 
    display: inline; 
    margin-right: 25px; 
} 

Answer 2

vous pouvez tr cela.

body { 
 
    background-color: #FFD700; 
 
} 
 
#menu { 
 
    background-color: #000; 
 
    color: white; 
 
    height: 130px; 
 
    left: -800px; 
 
    padding-top: 38px; 
 
    position: absolute; 
 
    top: -42px; 
 
    transform: rotate(-10deg); 
 
    text-align: center; 
 
    width: 2000px; 
 
} 
 
#menu ul { 
 
    margin-top: 70px; 
 
} 
 
#menu ul li { 
 
    display: inline; 
 
    margin-right: 25px; 
 
}

<div id="menu"> 
 
    <ul> 
 
    <li>Home</li> 
 
    <li>Blog</li> 
 
    <li>About me</li> 
 
    <li>Contact</li> 
 
    </ul> 
 
</div>