UL 中的对角线

Question

我对编码还很陌生，所以请记住这一点。

所以我正在做一个小网站，我正在尝试设计 header 和导航栏。我正在尝试做一些对角线来分隔其中的不同项目，但我似乎无法让它们出现。

我想用简单的投影做类似 this 的事情。

所以这是我的 HTML 和 CSS

<nav>
    <a href="#"><div class="logo"></div></a>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#game">Game</a></li>
        <li><a href="#infos">Infos</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a class="active" href="#help">Help</a></li>
   </ul>
</nav>

和

nav ul{
    list-style: none;
    float: right;
    margin: 0;
    padding: 0;
    display: flex;
}

nav ul li {
    list-style: none;
}

nav ul li a {
    line-height: 80px;
    color: #151515;
    padding: 12px 30px;
    text-decoration: none;
    text-transform: uppercase;
    transition: .3s;
}
    nav ul li a:hover{
    color: #F16918;
    text-shadow: 2px;
}

需要说明的是，图像中的所有内容都已完成并编码，除了我在 Photoshop 中绘制的对角线。

我的 header 滚动时切换为黑色（图像上方的白色），这就是为什么文本从不说它是黑色的，但它在图像中。

所以我想知道是否有人可以帮我得到那些对角线？

非常感谢！

Answer 1

试试这个（使用伪元素）..根据您的需要进行调整。

CSS

nav ul{
    list-style: none;
    float: right;
    margin: 0;
    padding: 0;
    display: flex;
}

nav ul li {
    list-style: none;
    position: relative;

}

nav ul li:after {
    position: absolute;
    content:"";
    width: 1px;
    height:100%;
    background: #000;
    transform: rotate(-45deg);
    top:0;
    left:0;
}

nav ul li a {
    line-height: 80px;
    color: #151515;
    padding: 12px 30px;
    text-decoration: none;
    text-transform: uppercase;
    transition: .3s;
}
    nav ul li a:hover{
    color: #F16918;
    text-shadow: 2px;
}

CSS 带阴影

nav ul li:after {
    position: absolute;
    content:"";
    width: 1px;
    height:100%;
    background: transparent;
    transform: rotate(-45deg);
    top:0;
    left:0;
    box-shadow: -4px 0 1px rgba(0,0,0,0.2);
}

HTML

<nav>
    <a href="#"><div class="logo"></div></a>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#game">Game</a></li>
        <li><a href="#infos">Infos</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a class="active" href="#help">Help</a></li>
   </ul>
</nav>

DEMO HERE

UL 中的对角线

Diagonal lines in UL

html

css

header

html-lists

nav