Поиск
Подписаться
Разное

Валидный XHTML 1.0 Transitional

Валидный RSS

Как создавать треугольные формы Категория: Веб-мастерство
Название: Как создавать треугольные формы
Дата добавления: 14-09-2012
Раз просмотрено: 692
Комментарии: 0
Рейтинг: · · · · · · · · · · (0 голосов)

Как создавать треугольные формы

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

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

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

Создание треугольников при помощи закодированного изображения

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

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

Недостатки

CSS границы

Создание треугольников при помощи CSS границ

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

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

Недостатки

HTML символы

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

Этот способ основан на использовании символов из доступного списка символов в Unicode. Вы можете вставлять в документ треугольники в виде этих символов: ►, ◄, ▼ и ▲. Их HTML мнемоники: ►, ◄, ▼ и ▲ соответственно.

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

Недостатки

Помимо использования символа треугольника, вы можете использовать символ стрелки, если вы уже используете шрифт с иконками в вашем проекте.

Квадрат, повернутый с помощью CSS

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

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

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

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

Недостатки

HTML5 Canvas

Добавьте в ваш HTML файл элемент <canvas> с необходимыми размерами:

<canvas id="triangle" height="100" width="100">Треугольник</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

Вы можете вставить треугольник в вашу HTML страницу при помощи языка SVG. Просто вставьте в необходимое место эту разметку:

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

Подробнее об SVG вы можете почитать в статье «SVG на сайтах». Затем, просто добавьте несколько CSS стилей на вашу страницу, которые зададут внешний вид треугольника:

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

.triangle polygon {
	fill: #98D02E;
	stroke: #65B81D;
	stroke-width: 2;
}

Это интересно: «Дружественный контент».

Понравился материал? Расскажи о нем всем:
Оцените эту статью:
Прокомментируйте:
Ваше имя:

Ваш комментарий будет первым.