Создание закругленных треугольников в CSS с помощью clip-path

CSS3 05.03.2021

В этом кратком руководстве мы рассмотрим практический пример, в котором свойство CSS clip-path может облегчить вам жизнь.

Мы собираемся создать треугольник CSS, который наследует некоторые свойства от своего родителя.

👉 Я знаю, что свойство clip-path поддерживается не во всех браузерах. Однако в настоящее время он поддерживается во всех основных браузерах (кроме Microsoft Edge), поэтому его можно использовать, если то, что вы создаете, является улучшением и не нарушит работу пользователей в старых браузерах.

Сss треугольник с закругленными углами - давай сделаем это!

Вероятно, самый популярный подход к созданию треугольников CSS - это ломаные границы:

Если вы установите высоту и ширину элемента равными 0, затем примените прозрачную границу, если вы затем установите только один цвет границы (например, border-bottom-color) на любое значение, которое вы хотите, вы получите треугольник.

Однако у этого метода есть некоторые ограничения. Если мы рассмотрим случай всплывающей подсказки, треугольник не может наследовать цвет фона родительского элемента (вы вынуждены установить переменную или обновить два значения). Кроме того, если вы установите границу на родительском элементе, будет непросто установить границу и на треугольнике (мы используем свойство границы для создания самого треугольника).

Альтернативный подход - использовать встроенный код SVG. Умно, но не так просто, как использование <div> или псевдоэлемента.

Один из методов, с которым я экспериментировал и который кажется крутым, состоит в использовании свойства clip-path:

Идея проста: мы превращаем квадрат в треугольник с помощью свойства clip-path. Для этого вам нужно передать функции многоугольника три набора координат:

0% 0% 👉 верхний левый угол
100% 100% 👉 нижний правый угол
0% 100% 👉 нижний левый угол

Помните, что первая координата определяет положение по оси x, а вторая - по оси y.

css скругленные треугольники с clip-path

В чем преимущество использования clip-path? Для начала, мы можем установить значения background-color и border равными наследованию. Каждый раз, когда вы обновляете стиль всплывающей подсказки, треугольник также обновляется. Во-вторых, вы можете установить радиус границы и сделать треугольник ... ну ... закругленным. Я понимаю, что это не то, чем вы планируете часто заниматься. Но все же это хитрый трюк!

А как насчет старых браузеров? Мы можем использовать правило @support, чтобы отображать треугольник только в браузерах, поддерживающих clip-path. В тех, которые этого не делают, мы скрываем треугольник.


.triangle {
  display: none;
}

@supports (clip-path: inset(50%)) {
  .triangle {
    display: block;
    height: 20px;
    width: 20px;
    background-color: inherit;
    border: inherit;
    position: absolute;
    bottom: -10px;
    left: calc(50% - 10px);
    clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
    transform: rotate(-45deg);
    border-radius: 0 0 0 0.25em;
  }
}

Это плохо? Не в этом случае, когда всплывающая подсказка отлично работает без маленькой стрелки.