Способы создания треугольников

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

Использование base64-изображений

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

Плюсы этого способа

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

Минусы этого способа

Процесс создания таких треугольников несколько длительнее, нежели остальные. Сначала нарисовать треугольник в графическом редакторе, сохранять, затем конвертировать, и только потом вставлять на сайт.
Если изображение треугольника большое, полученная base64-строка может быть очень огромной.
Браузеры-старички, такие как IE 6-7, не поддерживают base64-кодирование.

Пример использования

Код

Использование CSS border

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

Плюсы этого способа

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

Минусы этого способа

Треугольник, сделанный с помощью этого способа, состоит исключительно из границ, поэтому вы не сможете добавить теней, градиентов и других CSS3-фишек.
IE 6 не поддерживает прозрачность границ
И если вы используете FireFox, то наверняка уже знаете, что в CSS "transparent" не может быть прозрачным, особенно для диагональных границ. Остальные же возьмите себе на заметку

Пример использования

Код

Использование Unicode-символов

▼

Этот способ заключается в использовании Unicode-символов треугольников. Прост, как и способ с CSS-Border, но в нем так же есть и минусы. Помимо треугольников, можно использовать и другие Unicode-символы. Просмотреть их можно здесь

Плюсы этого способа

Так же легко меняется цвет и размер треугольника, но здесь значения зависят от свойств font-size и color + в качестве тени можно использовать box-shadow.
Данный способ на 100% кроссбраузерный.

Минусы этого способа

Опять-таки, вы не сможете много поиграться со стилями треугольника, вы можете поменять лишь цвет и тень треугольника.
IE 6 не поддерживает прозрачность границ
Невозможно достичь совершенства пикселей во всех браузерах сразу.

Пример использования

Код

CSS-вращение квадрата

В этом способе мы создадим CSS-квадрат и будем вращать и обрезать его с помощью CSS-свойств.

Плюсы этого способа

Есть возможность стилизовать треугольник любыми CSS-свойствами.

Минусы этого способа

Данное решение не является кроссбраузерным из-за свойства transform, которое в IE, как вы понимаете, не поддерживается.

Пример использования

Код

Код

.rect-triangle {width:100px;height:100px;position:relative;overflow:hidden;} .rect-triangle::after {content:"";position:absolute;top:-35px;left:15px;width:65px;height:65px;border:2px solid #ce0f3d;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);background-color:#f21972;box-shadow:0 -1px 0 rgba(255, 255, 255, .7) inset, -1px 0 0 rgba(255, 255, 255, .7) inset;}

HTML 5 Canvas

Здесь мы создадим треугольник, используя HTML 5 Canvas и JavaScript.

Пример использования

Код

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

Код

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 5 Canvas, но здесь мы обойдемся без использования JavaScript.

Пример использования

Код

Код

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

А какой способ используешь ты?

Мне нравится 7

Просмотры: 2118 · Комментарии: 1 · Добавил: Kelin · Категория: Статьи по HTML и CSS