在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>