Страница 1 из 11
Общий форум » Все для вебмастера » Начинающий Вебмастер » Как создать треугольные фигуры на CSS
Как создать треугольные фигуры на CSS
Kosten
Дата: Суббота, 02.12.2017, 02:58 | Сообщение 1
Администраторы
Сообщений:16015
Награды: 51


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

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



Имея следующий 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;
}


Демонстрация:

Помимо использования вы уже используете знаковый шрифт в своем проекте вы можете просто использовать символ стрелки из доступных.
Прикрепления: 1355348.png(12Kb)
Страна: (RU)
Общий форум » Все для вебмастера » Начинающий Вебмастер » Как создать треугольные фигуры на CSS
Страница 1 из 11
Поиск: