使用css旋轉右邊框

我有一個菜單列表。現在爲每個菜單都有一個右手邊框。我想旋轉該邊框20deg。使用css旋轉右邊框

的Html

<ul class="menu"> 
<li>Home</li> 
<li>About Us</li> 
</ul>

CSS

ul.menu li:after { border-right:1px solid #000; transform:rotate(20deg); } 
ul.menu li{ display:inline-block; padding:0 1rem;}

但上面的代碼是行不通的。

任何幫助，高度讚賞。提前致謝。

來源

2015-04-02 Raj

有一個通過使用content: "/"這種簡單的方法，它看起來不像邊界一樣，但是通過調整可以得到相似的結果和line-height等。它的工作主要是所有瀏覽器。

ul.menu li { 
 
    display: inline-block; 
 
    padding-right: 1rem; 
 
} 
 
ul.menu li:after { 
 
    content: "/"; 
 
    padding-left: 1rem; 
 
} 
 
ul.menu li:last-child { 
 
    padding-right: 0; 
 
} 
 
ul.menu li:last-child:after { 
 
    content: ""; 
 
    padding-left: 0; 
 
}

<ul class="menu"> 
 
    <li>Home</li> 
 
    <li>About Us</li> 
 
</ul>

來源

2015-04-02 20:11:15 Stickers

一定要弄清楚在項目中使用rem是否可以 - http://caniuse.com/#feat=rem – Stickers 2015-04-02 20:20:05

真棒解決方案。較少的代碼和一流的解決方案。非常感謝。是的，我可以使用rem。 – Raj 2015-04-02 20:24:21

相反邊界的，你得後，實際添加元素：

CSS：

ul.menu li:after { content: ""; background: #000; width: 1px; height: 100%; position: absolute; right: 0; top: 0; transform:rotate(20deg); } 
ul.menu li{ position: relative; display:inline-block; padding:0 1rem;}

這裏是一個小提琴：

http://jsfiddle.net/31xa0rLu/

來源

2015-04-02 20:03:59

阿馬爾感謝您的幫助。 – Raj 2015-04-02 20:24:58

使用css旋轉右邊框

回答

相關問題