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