ZorNet.Ru — сайт для вебмастера » HTML и CSS » Треугольник с рамкой на HTML + CSS

Треугольник с рамкой на HTML + CSS

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

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

HTML

Код

CSS

Код

.triangle{
  display: block;
  width: 0;
  height: 0;
  border-top: 10px solid #000000;
  border-right: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid transparent;
}

И получаем:

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

Давайте попробуем это:

Прежде всего, поставьте границу только сверху.

Код

.triangle{
  display: block;
  width: 100px;
  height: 100px;
  border-top: 10px solid #000000;
}

На этом завершаем и сохраняем.

Затем попробуйте положить разные цвета сверху и справа.

Код

.triangle{
  display: block;
  width: 100px;
  height: 100px;
  border-top: 10px solid #000000;
  border- right: 10px solid #dddddd;
}

Выставляем оттенок цвета, как по правую и по ввех элемента.

Граница между верхней границей и правой границей стала диагональной, где можете создавать треугольники с помощью border CSS.

Установите ширину и высоту равными 0, и расположите левую и нижнюю границы с толщиной линии 10px и прозрачностью. Коробка с нулевой шириной и высотой. Фактическая ширина и высота стрелки определяется шириной границы.

Код

.triangle{
  display: block;
  width: 0;
  height: 0;
  border-top: 10px solid #000000;
  border-right: 10px solid #dddddd;
  border-bottom: 10px solid transparent;
  border-left: 10px solid transparent;
}

Так все получится.

После этого сделаем цвет правой границы прозрачным.

Код

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

Элемента width и height, где вертикальная ширина идет от 0, где нет ширины. И когда я окружил его толщиной линии 10 пикселей и сделал border цвета, отличные от одного, прозрачными, где получите треугольник толщиной 10 пикселей.

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

23 Июня 2019 Просмотров: 2416 Комментариев: (1)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 1
Порядок вывода комментариев: Kosten 23 Июня 2019 08:26¹ 0 Также есть отличная подборка треугольников, которые выставлены по всем сторонам, а также еще исполнены по разному дизайну, где можете посмотреть на форуме, как продолжение этой темы.