在CSS中设计一个导航栏

Question

我想要设计一个带有导航栏的网站，如this。

我已经尝试过用CSS中的rotate-tag，但它不起作用。

是否有可能在CSS中使用CSS创建此类导航条，还是应该使用background-image标记？

非常感谢。

Answer 1

哈克，但工作：JSFiddle

可能需要调整时，你会实现你的网站上。

<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

可以TR这一点。

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>