Главная > Образование и Изучение > Создаем треугольные фигуры

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


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

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

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

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

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

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

Предположим, что вы уже создали собственное изображение в виде треугольника и хотите сэкономить значимый 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. Пожалуй, оставим это на будущее. В любом случае, таким образом вы сможете создавать гораздо более привлекательные треугольники. Пожалуйста, поделитесь своими мыслями в комментариях.
Вернуться назад