CSS Треугольники без Грязных Хаков

Наклонные квадраты с прозрачным фоном и границей изображения.
CSS Формы и фильтры. Красивые Эффекты для Изображений
12/06/2017
Одностраничный Шаблон Параллакс - Skrollex - Creative One Page Parallax
Одностраничный Шаблон Параллакс — Skrollex — Creative One Page Parallax
13/06/2017
CSS Треугольники без Грязных Хаков

CSS Треугольники без Грязных Хаков

Любой, кто пытался сделать HTML стрелки, пузыри для речи или другие остроконечные элементы, знает, что, чтобы создать CSS треугольник вам придется использовать какой — то хак. Два наиболее популярных решение для создания треугольников из границ, или использовать символы Юникода.

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

Вводим Clip-path

Clip-path — новое дополнением к CSS спецификациям, которое позволяет показать только часть элемента и скрыть остальное. Вот как это работает:

Скажем, у нас есть обычный прямоугольный — div элемент.

HTML
<div></div>

CSS
div {
    width: 200px;
    height: 200px;
    background: url(https://goo.gl/BeSyyD);
}

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

<div></div>
CSS
div {
    width: 200px;
    height: 200px;
    background: url(https://goo.gl/BeSyyD);

    /* Точки: центрирование верх, левое нижнее, правое нижнее */
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

Таким образом, мы можем сделать не только треугольники, но и все виды асимметричных форм, которые ведут себя как обычные блоки CSS.

Единственный недостаток этого метода, — мы должны тщательно рассчитать координаты наших точек для того, чтобы получить хороший перспективный треугольник.

Поддержка браузеров

Если открыть caniuse для clip-path, то свойство отлично работает без префикса в Chrome и с -webkit- префиксом в Safari.

Изучение clip-path

Свойство clip-path имеет множество других трюков в рукаве, включая магию SVG. Чтобы узнать больше об этом проверьте.

  • Clip-path на MDN — здесь
  • Углубленный учебник на Codrops — здесь
  • Clippy, генератор clip-path — здесь

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *