Question

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

因此，我正在一个小型网站上工作，并且尝试对页眉和导航栏进行样式化。我正在尝试做一些对角线以分隔其中的不同项目，但我似乎无法使它们出现。

我想做一个类似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中绘制的对角线以外，图像中的所有内容均已完成并编码。

滚动时我的标题变为黑色（图像上方为白色），所以这就是文本从不说黑色，而是在图像中的原因。

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

非常感谢！

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

1 个答案: