Как сделать треугольник css

Как создать указатель-треугольник на чистом CSS

Нашел в интернете интересный способ, позволяющий делать указатель-трекгольник на чистом CSS без использования графики. Вы частенько видели такие указатели на сайтах в боковом вертикальном меню:

Как создать указатель-треугольник на чистом CSS

А также в комментариях:

Как создать указатель-треугольник на чистом CSS

Итак, создадим треугольник в CSS через «border» двумя способами:
1 способ – с помощью цвета совпадающего с фоном сайта;
2 способ — с помощью прозрачных сторон.

Создать треугольник с помощью border

Способ №1

Чтобы задать треугольник с помощью «border», нужно указать:

толщину границы 20px ( border-width : 20px );
цвет четырех сторон ( border-color : blue red green black );
стиль рамки ( border-style : solid );
ширину и высоту со значением "0" ( width : 0 ; height : 0 ; )

Создать треугольник с помощью border

Теперь три стороны сделаем таким же цветом, как фон сайта, а одну оставим черным цветом.

Как создать указатель-треугольник на чистом CSS

Способ №2

Чтобы задать треугольник с помощью «border», нужно указать:

толщину границы 20px ( border-width : 20px );
цвет четырех сторон ( border-color : blue red green black );
стиль рамки ( border-style : solid );
ширину и высоту со значением "0" ( width : 0 ; height : 0 ; )

Создать треугольник с помощью border

Теперь три стороны сделаем прозрачными с помощью «transparent», а одну оставим черным цветом.

Как создать указатель-треугольник на чистом CSS

Если вы задаетесь вопросом, почему я написал вам первый способ, если второй более правильный, то я отвечу, что это на тот случай, если какой-то браузер, типа Internet Explorer не поймет сделанный вами трюк с прозрачностью «transparent».

Таблица возможных видов треугольников:

Вид Стиль
Как создать указатель-треугольник на чистом CSS border: 20px solid transparent;
border-top: 20px solid black;
Как создать указатель-треугольник на чистом CSS border: 20px solid transparent;
border-right: 20px solid black;
Как создать указатель-треугольник на чистом CSS border: 20px solid transparent;
border-bottom: 20px solid black;
Как создать указатель-треугольник на чистом CSS border: 20px solid transparent;
border-left: 20px solid black;
Как создать указатель-треугольник на чистом CSS border: 20px solid transparent;
border-top: 20px solid black;
border-right: 20px solid black;
Как создать указатель-треугольник на чистом CSS border: 20px solid transparent;
border-right: 20px solid black;
border-bottom: 20px solid black;
Как создать указатель-треугольник на чистом CSS border: 20px solid transparent;
border-bottom: 20px solid black;
border-left: 20px solid black;
Как создать указатель-треугольник на чистом CSS border: 20px solid transparent;
border-left: 20px solid black;
border-top: 20px solid black;

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

6 методов создания треугольников

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

Существуют различные методы для построения треугольников и в данном уроке мы рассмотрим их.

demosourse

Закодированное изображение

Закодированное изобржаение

Подготовленное изображение треугольника лучше всего конвертировать в строку, чтобы сократить количество запросов HTTP.

Полезные инструменты:

Плюсы

  • Можно сделать любой дизайн с помощью теней, градиентов и рамок. А потом просто закодировать изображение.

Минусы

  • Нужно уметь пользоваться инструментом на подобие Photoshop/Gimp для редактирования изображения.
  • Для больших изображений размер строки может быть огромным.
  • Старые браузеры (такие как IE6/IE7) не поддерживают данный тип кодировки.

Рамка CSS

Рамка CSS

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

Плюсы

  • Легко изменять цвет и размер с помощью значений свойств CSS.
  • Данный метод кросс-браузерный.

Минусы

  • Данная техника использует рамки, поэтому нельзя использовать тени, градиенты и другие прелести СSS3.
  • Нужно помнить, что IE6 не поддерживает прозрачные рамки.
  • При использовании Firefox, значение CSS “transparent” может оказаться непрозрачным, особенно на диагональных рамках.

Объект HTML

Объхект HTML

Данное решение использует символы в кодах Unicode.

Плюсы

  • Кросс-браузерное решение
  • Можно добавлять тени с помощью свойства CSS3 text-shadow .

Минус

  • Кроме text-shadow , никаких других свойств CSS3 использвоать нельзя.
  • Нельзя получить точное пиксельное положение во всех браузерах.

Полезный инструмент:

Кроме того, можно использовать шрифт с иконками в проектах, чтобы получить символ треугольника.

Повернутый квадрат CSS

Повернутый квадрат

Для работы данного метода требуется два блока. Но можно использовать элемент с псевдо-элементами.

  • Создаем квадрат, например, 100×100 px – содержание поворачиваемого блока.
  • Поворачиваем блок на 45 градусов для формирования образа алмаза.
  • Сдвигаем алмаз вверх и устанавливаем свойство overflow: hidden для внешнего блока, чтобы выводить только половину.
  • Готово!

Плюсы

  • Можно использовать свойства CSS3 для создания нужного образа.

Минусы

  • Данное решение не является кросс-браузерным из-за использования трансформаций CSS3.

Элемент canvas HTML5

В разметке HTML помещаем элемент canvas :

И с помощью JavaScript рисуем треугольник:

SVG (Scalable Vector Graphics)

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

И добавляем для него стили:

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.red-team-design.com/how-to-create-triangle-shapes
Перевел: Сергей Фастунов
Урок создан: 12 Сентября 2012
Просмотров: 62987
Правила перепечатки

5 последних уроков рубрики "CSS"

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Как создать треугольники CSS?

На сайте: CSS Tricks — Shapes of CSS есть множество различных форм CSS, и я особенно озадачен треугольником.

введите сюда описание изображения

Как и почему это работает?

Я выбрал этот относительно простой вопрос для перевода, так как меня заинтересовали ответы, которые очень наглядно, подробно и доходчиво объясняют технику реализации фигур CSS. Ответов много, планирую в дальнейшем добавить переводы других интересныx ответов из этого топика Enso.

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

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