—»     —»   Создаем треугольные фигуры
  Раздел: Образование и Изучение   Комментариев: 3  

Создаем треугольные фигуры

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

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

Создаем треугольные фигуры

* Смотреть демо

Кодированное изображение

Создаем треугольные фигуры

Предположим, что вы уже создали собственное изображение в виде треугольника и хотите сэкономить значимый HTTP-запрос. Тогда вам как раз подойдет вариант с конвертированием его в 64-битную строку.

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

* http://webcodertools.com/imagetobase64converter
* http://image2base64.wemakesites.net/

Преимущества

* Вы можете использовать их как угодно, применять тени, градации, полосы и так далее.

Недостатки

* Для редактирования этого изображения вам понадобятся графические редакторы вроде Photoshop/Gimp.
* Большие изображения могут иметь серьезный вес.
* Старые браузеры вроде IE6-7 не поддерживают этот тип кодировки.

CSS-границы

Создаем треугольные фигуры

Наряду с предыдущим вариантом, этот метод больше всего нам нравится – он позволяет легко создавать маленькие треугольники.

Преимущества

* Легко изменять цвет и размер, при помощи CSS-значений.
* Кросс-браузерное решение

Недостатки

* Данный метод заключается в использовании границ, поэтому вы не сможете добавлять тени, градации и другие причуды CSS3.
* Помните, что IE6 не поддерживается прозрачные границы.
* Если вы используете Firefox, то будьте готовы к тому, что параметр transparent не будет прозрачным, особенно у диагональных границ. Изучить данную тему подробнее можно здесь.

HTML-элемент

Создаем треугольные фигуры

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

Преимущества

* Кросс-браузерное решение
* Вы можете добавлять тени при помощи CSS3-параметра text-shadow.

Недостатки

* Опять же, здесь вы не сможете использовать многие CSS3-параметры. Точнее, сможете использовать только text-shadow.
* Вряд ли у вас получится добиться идеальной четкости во всех браузерах.

Не забудьте ознакомиться с этим замечательным ресурсом: http://copypastecharacter.com/.

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

Перевернутый многоугольник в CSS3

Создаем треугольные фигуры

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

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

Преимущества

* Возможность обыграть градации и тени блоков посредством CSS3.

Недостатки

* Данное решение не является кросс-браузерных, прежде всего из-за параметра CSS3 transform. Конечно же, если вы не зашли дальше и не использовали cssSandpaper.

HTML5 Canvas

Имея в своем HTML-файле следующий элемент:

<canvas id="triangle" height="100" width="100">Triangle</canvas>

…вы можете рисовать треугольники при помощи javascript:

var canvas = document.getElementById('triangle');
var context = canvas.getContext('2d');

context.beginPath();
context.moveTo(0, 0);
context.lineTo(100, 0);
context.lineTo(50, 100);

context.closePath();

context.fillStyle = "rgb(78, 193, 243)";
context.fill();

SVG (Scalable Vector Graphics)

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

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-triangle">
<polygon points="0,0 100,0 50,100"/>
</svg>

Затем просто добавьте немного стилей:

.svg-triangle{
margin: 0 auto;
width: 100px;
height: 100px;
}

.svg-triangle polygon {
fill:#98d02e;
stroke:#65b81d;
stroke-width:2;
}

* Смотреть демо

В завершение

Вынуждены признаться, что мы не сильно изучили два последних пункта: canvas и SVG. Пожалуй, оставим это на будущее. В любом случае, таким образом вы сможете создавать гораздо более привлекательные треугольники. Пожалуйста, поделитесь своими мыслями в комментариях.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: HTML 5, CSS
Опубликовал Design FactoRy   Прочитано (раз): 9663   |   Оставлено комментариев: 3
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 9 октября 2012 @ 12:20
Написал: Rewis — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Отличные примеры, давно пользуюсь, конечно, можно и в png нарисовать, но как по мне, так лучше через CSS3, хотя и последние два метода в статье, тоже заслуживают внимания, но, насколько я правильно понимаю, отрисовка большого количества негативно скажется на скорости загрузки или я не прав. В любом случае, автору спасибо.
Комментарий #2: 9 октября 2012 @ 12:35
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3324   |   Комментариев: 500
ICQ: --- не указано ---
Цитата: Rewis
отрисовка большого количества негативно скажется на скорости загрузки или я не прав
ну в какой то мере да.
Пожалуйста.
Комментарий #3: 19 ноября 2014 @ 13:46
Написал: Владимир — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Здравствуйте. Спасибо за статью.
Подскажите, как сделать в примере с canvas'ом, чтобы треугольник был в процентах по ширине и фиксированным по высоте?
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031