Есть несколько способов создания треугольника для ваших веб-дизайнов и в этой статье вы увидите как вы можете это сделать. Вы можете спроектировать его как хотите используя тени, градиенты и штрихи, что просто закодируйте его.
Это также довольно распространенная техника используемая для таких вещей как подсказки и выпадающие меню. Вместе с вышеизложенным это один из моих любимых методов создания маленьких и полезных треугольников.
Имея следующий 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();
Как получилось, смотрим демонстрацию:
Второй вариант будет на CSS:
Вот как вы можете определить встроенный 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;
}
Демонстрация:
Помимо использования вы уже используете знаковый шрифт в своем проекте вы можете просто использовать символ стрелки из доступных.
