Сегодня поговорим о том, как создать наклонную нижнюю рамку, подобную показанной ниже. Этот урок можно считать посвященным новому взгляду на верстку веб-сайтов: долгое время мы полагались на сетки из трех столбцов и углы в 90 градусов. Но применив воображение, мы можем создать намного больше.

Для этого решения дополнительный элемент не требуется. Вместо этого используются множественные фоны и линейный градиент. Полный код HTML следующий:

<div id="login">
        <h1>Sign Up</h1>
        <img src="adriana.jpg" alt>
        <label for="name">Name</label>
        <input id="name" type="text" name="name">
        <label for="email">Email</label>
        <input id="email" type="email" name="email">
        <label for="password">Password</label>
        <input id="password" type="password" name="password">
        <input type="submit" value="Done">
</div>

Ключевой код CSS:

#login {
        font-family: Avenir, Calibri, sans-serif;
        width: 33%;
        margin: 0 auto;
        background-image:
                linear-gradient(175deg, transparent 36%, white 36.05%),
            url(nahatlatch.jpg);
        text-align: center;
        background-size: 100%, cover;
        background-repeat: no-repeat;
}

Накрывая растровое фоновое изображение линейным градиентом и не забывая, что в коде CSS последнее фоновое изображение в объявлении накладывается первым, получаем расположение градиента над изображением. Начиная градиент с прозрачного, добиваемся видимости изображения из-под градиента, а помещая переход прозрачной части градиента очень близко к белой части, достигаем эффекта остро обрезанного края.

Остальной код CSS просто задает стили блоку, который может представлять собой буквально любые блочные элементы, и его содержимому. Он приведен ниже на всякий случай:

#login h1 { font-weight: 100; padding-top: 6rem; }
#login img {
        width: 33%;
        height: auto;
        border-radius: 50%;
        border: 5px solid white;
}
#login label { color: #666; margin-top: 1rem; }
#login input, #login label {
        display: block;
        width: 90%;
        margin: 0 auto;
        padding: .5rem;
}
#login input {
        text-align: center;
        border: none;
        border-bottom: 1px solid #aaa;
        font-size: 1rem;
}
#login input[type="submit"] {
        width: 100%;
        margin-top: 1rem;
        background: hsl(0, 90%, 60%);
        color: #fff; padding: 1rem;
        text-transform: uppercase;
}

В демонстрации работы на сайте Codepen еще добавлен код для адаптивности.

Единственный минус этой версии эффекта — совместимость со старыми версиями браузеров: браузер Interner Explorer не поддерживает градиенты до 10 версии. Хотя можно добавить другую версию объявления свойства фонового изображения выше указанной именно для этого браузера.

Использована фотография Dru, лицензированная по лицензии Creative Commons.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Двухмерные трансформации CSS: наклон, масштабирование и сдвиг
• Создание улучшенных диаграмм с помощью режимов наложения и SVG
• Создание меню в ромбовидной сетке с использованием CSS