0

Всем добрый день!

Решил попробовать сделать нечто подобное, но так и не придумал как это сделать.. введите сюда описание изображения

Как бы картинка налезает на треугольник снизу + у этого треугольника красные линии. Подскажите как это сделать?

<html>
<head>
    <title>Servera</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <nav class="nav-top">
            <div class="container">
                <p>Вход / Регистрация</p>
            </div>
        </nav>
        <nav class="nav-bottom">
            <div class="container">
                <img src="" alt="Loyal Servers">         
            </div>
        </nav>
    </header>
    <main class="container">
      <h3>title</h3>
    </main>

</body>
</html>

Если можно, вот на этом примере jsfiddle

1 ответ 1

2

Тебе нужен clip-path

Вот ссылка на статью про него https://getinstance.info/articles/css/making-sense-of-clip-path/

и вот сделанный твой header https://jsfiddle.net/gp3vqgjv/4/

clip-path: polygon(0 0, 100% 0, 100% 95%, 75% 95%, 50% 100%, 25% 95%, 0 95%);
1
  • Круто! Спасибо! То что нужно!
    – Alex Reid
    12 янв 2018 в 13:04

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.