Диагональные линии в UL - PullRequest
Новая
       26

Диагональные линии в UL

0 голосов
/ 06 декабря 2018

Я довольно новичок в кодировании, поэтому имейте это в виду.

Итак, я работаю над небольшим веб-сайтом и пытаюсь стилизовать заголовок и навигационную панель.Я пытаюсь сделать несколько диагональных линий, чтобы отделить различные элементы в нем, но я не могу заставить их появиться.

Я хотел бы сделать что-то вроде 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.

Мой заголовок переключается на черный при прокрутке (белый сверху на изображении), поэтому текст никогда не говорит, что он черный, но он находится вimage.

Так что мне было интересно, кто-нибудь может помочь мне получить эти диагональные линии?

Большое спасибо!

1 Ответ

0 голосов
/ 06 декабря 2018

Попробуйте это (используя псевдоэлемент) .. отрегулируйте в соответствии с вашими потребностями.

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 WITH SHADOW 

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>

ДЕМО ЗДЕСЬ

...