Question

我有一个菜单列表。现在每个菜单都有一个右边框。我想旋转那个边框20deg。

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;}

但上面的代码无效。

非常感谢任何帮助。提前谢谢。

Answer 1

而不是边框，你必须在它之后添加一个元素：

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/

Answer 2

有一种更简单的方法，只需使用content: "/"，它看起来与边框看起来不一样，但您可以通过调整font-size和{{1}来获得类似的结果它主要适用于所有浏览器。

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;
}

使用css旋转右边框

2 个答案: