Прихоть CSS | умная реализация треугольников с закругленными углами

внешний интерфейс JavaScript CSS
Прихоть CSS | умная реализация треугольников с закругленными углами

Ранее в этой статье --«Критика реализации треугольников CSS», представляет 6 способов реализации треугольников с помощью CSS.

Но одна очень важная сцена была упущена,Как реализовать треугольник с закругленными углами с помощью чистого CSS?, так:

A triangle with rounded

В этой статье будут представлены несколько реализаций для реализации треугольника с закругленными углами.

Способ 1. Полностью совместимый SVG Dafa

Чтобы создать треугольник со скругленными углами,минимальное количество кода, лучше всего использовать генерацию SVG.

Полигональные теги с использованием SVG<polygon>Создайте треугольник, используя SVGstroke-linejoin="round"Создает закругленные углы на соединениях.

Объем кода очень мал, основной код выглядит следующим образом:

<svg  width="250" height="250" viewBox="-50 -50 300 300">
  <polygon class="triangle" stroke-linejoin="round" points="100,0 0,200 200,200"/>
</svg>

.triangle {
    fill: #0f0;
    stroke: #0f0;
    stroke-width: 10;
}

Фактический график выглядит следующим образом:

A triangle with rounded

Вот, собственно, с помощью полигонов SVGstroke-linejoin: roundСоздание филе атрибута,stroke-linejoinчто это такое? Он используется для управления между двумя обведенными сегментами линии с тремя необязательными значениями:

  • miterзначение по умолчанию, означающее, что квадратная кисть используется для формирования острых углов на стыках
  • roundОбозначает соединение с закругленными углами для достижения гладкого эффекта
  • bevelСоединение митры формируется в соединении

мы на самом делеПередайте кадр с границей, и тип соединения границыstroke-linejoin: roundМногоугольники генерируют закругленные треугольники.

Если мы отделим цвет фона от цвета границы, это будет выглядеть так:

.triangle {
    fill: #0f0;
    stroke: #000;
    stroke-width: 10;
}

Управляйте размером закругленных углов с помощью ширины хода

Так как же контролировать размер закругленных углов? Также очень просто, контролируяstroke-widthразмер, вы можете изменить размер закругленных углов.

Конечно, чтобы сохранить размер треугольника одинаковым при увеличении/уменьшенииstroke-widthПри этом необходимо уменьшить/увеличить графикwidth/height:

Вы можете нажать здесь для полной ДЕМО:Демонстрация CodePen — использование SVG для реализации треугольника с закругленными углами

Способ 2. Графическая вышивка

Однако, как упоминалось выше,Треугольник с закругленными углами с использованием чистого CSS, но первый метод на самом деле использует SVG. Итак, используя только CSS, есть ли способ?

Конечно дивергентное мышление, вот чем интересен CSS, с одной графикой столько умных решений!

Посмотрим, треугольник с закругленными углами, его реально можно разбить на несколько частей:

Итак, по сути, нам нужно только уметь рисовать вот такой ромб со скругленными углами, а вращая и накладывая три из них, мы можем получить скругленный треугольник:

Нарисуйте ромб с закругленными углами

Затем наша следующая цель — нарисовать ромб с закругленными углами.Существует много способов.В этой статье дается один из способов:

  1. Сначала превратите квадрат в ромб, используяtransformЕсть постоянная формула:

<div></div>

div {
    width:  10em;
    height: 10em;
    transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866);
}

  1. Сделайте один из углов закругленным:
div {
    width:  10em;
    height: 10em;
    transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866);
  + border-top-right-radius: 30%;
}

На данный момент мы успешно получили бриллиант со скругленными углами!

Сшейте 3 ромба со скругленными углами.

Следующий шаг очень прост, нам нужно только использовать два других псевдоэлемента элемента, чтобы сгенерировать 2 ромба с закругленными углами и сшить вместе в общей сложности 3 графических смещения вращения!

Полный код выглядит следующим образом:

<div></div>

div{
    position: relative;
    background-color: orange;
}
div:before,
div:after {
    content: '';
    position: absolute;
    background-color: inherit;
}
div,
div:before,
div:after {
    width:  10em;
    height: 10em;
    border-top-right-radius: 30%;
}
div {
    transform: rotate(-60deg) skewX(-30deg) scale(1,.866);
}
div:before {
    transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0,-50%);
}
div:after {
    transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);
}

Вы можете получить закругленный треугольник! Эффект следующий:

image

Вы можете нажать здесь для получения полного кода:CodePen Demo -- A triangle with rounded

Способ 3. Графическая строчка реализует градиент цвета треугольника со скругленными углами.

Это закончено? нет!

Хотя приведенная выше схема не слишком сложна, есть один момент, который не слишком совершенен. Это закругленный треугольник, который не поддерживает градиентные цвета. Так:

Если вам нужно реализовать закругленные треугольники градиентного цвета, это все еще немного сложно. Но все еще есть люди, которые возились с этим. Следующие методы относятся к --How to make 3-corner-rounded triangle in CSS.

Он также использует несколько блоков для сращивания, но на этот раз наша базовая графика будет очень сложной.

Прежде всего, нам нужно реализовать такую ​​рамку контейнера, которая аналогична вышеописанному методу, который можно понимать как закругленный ромб (рисовать границу несложно):

<div></div>

div {
    width: 200px;
    height: 200px;
    transform: rotate(30deg) skewY(30deg) scaleX(0.866);
    border: 1px solid #000;
    border-radius: 20%;
}

Далее мы также используем два псевдоэлемента, чтобы реализовать объединение двух немного странных изображений, что считается правильным.transformКоллекция различных применений:

div::before,
div::after {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
}
div::before {
    border-radius: 20% 20% 20% 55%;
    transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(30deg) scaleY(0.866) translateX(-24%);
    background: red;
}
div::after {
    border-radius: 20% 20% 55% 20%;
    background: blue;
    transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(-30deg) scaleY(0.866) translateX(24%);
}

Для простоты понимания сделана простая анимация трансформации:

Суть в том, чтобы добиться такого графика:

image

Наконец, добавьтеoverflow: hiddenи удалить родительский элементborderВы можете получить закругленный треугольник:

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

div::before,
div::after, {
    background: linear-gradient(#0f0, #03a9f4);
}

В итоге вы получите градиентный закругленный треугольник:

Полный код каждого из приведенных выше рисунков вы можете нажать здесь:CodePen Demo -- A triangle with rounded and gradient background

наконец

В этой статье представлены несколько способов реализации треугольников со скругленными углами в CSS.Хотя некоторые из них громоздки, но они также отражают "интересную и мучительную" сторону CSS. При его применении все же нужно подумать, стоит ли использовать вышеперечисленные способы , Есть компромиссы, и иногда вырезание карты может быть лучшим решением.

Ну вот и конец этой статьи, надеюсь она вам поможет :)

Если вы хотите получить самую интересную информацию о CSS, не пропустите мой официальный аккаунт --Интересные факты о внешнем интерфейсе iCSS😄

Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.

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

Категории