СКОШЕННЫЕ ЭЛЕМЕНТЫ НА CSS

Автор: CSS GRID    Источник: codepen.io
04.02.2017
2199
0
img

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

SVG

See the Pen Slanted SVG by CSS GRID (@cssgrid) on CodePen.

Создайте в SVG четырехугольный наклонный полигон. Установите ширину в 100% или 100vw. В этом примере я еще добавил фильтр, чтобы получить эффект тени.

Градиент

Трюк использования градиента в том, чтобы он не выглядел как градиент. Задайте два цвета таким образом, чтобы они останавливались в одной точке. Цвета, которые обычно перетекают друг в друга, будут выглядеть полностью разделенными. Потом задайте угол наклона.

See the Pen gradient angled by CSS GRID (@cssgrid) on CodePen.

Граница между двумя цветами выглядит не ровной (я добавил немного черного между ними, чтоб все было не так плохо). Это наименее гибкий способ (к примеру, на градиент нельзя добавить тень).

Skew & Rotate

Этот способ от @28inch.

See the Pen xbZxGm by Balázs Sziklai (@28inch) on CodePen.

Альтернативный метод SVG

Если бы я сказал, что на примере выше SVG, вы бы решили, что вся серая область – это векторная графика. На самом деле это обычный div такого же цвета как SVG треугольник, размещенный над ним с помощью CSS селектора :before. И вот почему это хорошая идея: в моем первом SVG примере, чтобы встроить текст в SVG форму, я скорее использовал SVG текст, нежели параграфы или заголовки HTML. Написать и разместить SVG текст не сложно, но все же организовать и расположить в документе HTML элементы проще. Технически, можно было бы воспользоваться SVG тегом foreignObject, чтобы встроить HTML в SVG. Или же использовать CSS позиционирование, чтобы расположить HTML поверх большой SVG формы как поверх фона. Но присоединить SVG сверху или снизу обычного HTML элемента проще, и это мой любимый метод, чтоб получить крутой наклонный эффект.

ПОХОЖИЕ СТАТЬИ: