» »

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

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

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

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

HTML

Код
<span class="triangle"></span>

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;
}

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



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

Код
.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;
}

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



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

Другими словами треугольники созданные с помощью CSS, где представляют собой треугольники, которое созданные с использованием поведения границы между границами, являющейся наклонной. Таким образом, вы можете выразить границу треугольника с помощью CSS.
2019-06-23 Просмотров: 286 Комментарий: (1)

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

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

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