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

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 — здесь
Aliexpress INTAliexpress INTAliexpress INT

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

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