Треугольник на CSS

Когда то были времена когда треугольники рисовали через CSS-свойство border у псевдо-элемента. В настоящее время это правильно делать используя свойство clip-path. При этом отрисовать можно как на самом элементе, так и на его псевдо-элементах.

CSS-свойство clip-path создает область отсечения, определяющую какая часть элемента должна отображаться. Части находящиеся внутри области - отображаются, а те что находятся за ее пределами - скрыты.

Именно используя clip-path мы будем рисовать треугольники.

Для начала создадим HTML-элемент, который будет треугольником:

<div class="demo-triangle"></div>

Сразу зададим ему стили определяющие ширину и высоту элемента, а так же добавим фоновый цвет:

.demo-triangle {
    display: block;
    width: 80px;
	height: 80px;
	background-color: #3e5d75;
}

Получается вот такой вот блок:

Теперь добавляя к прописанным стилям свойство clip-path, можем по координатам вырезать треугольники из данного блока. Вот несколько примеров:

clip-path: polygon(50% 0, 100% 100%, 0 100%);

Так как нам известны ширина и высота элемента в пикселях (80 х 80 px) такой же самый треугольник можем сделать указывая координаты не в процентах, а в пикселях:

clip-path: polygon(40px 0, 80px 80px, 0 80px);

При желании можем сделать треугольник повернутый вправо:

clip-path: polygon(0 0, 100% 50%, 0 100%);

Можем сделать прямоугольный треугольник:

clip-path: polygon(0 0, 100% 100%, 0 100%);

Или можно даже так:

clip-path: polygon(25px 7px, 84% 65%, 6px 93%);

Правила рисования треугольников на CSS

Для отрисовки треугольника через CSS используем свойство clip-path. В его значение указываем CSS-функцию polygon() придерживаясь следующих правил:

1. Так как тругольник имеет три вершины, то в функцию polygon() передаём параметрами координаты трёх точек A, B и C. Пример: polygon(Ax Ay, Bx By, Cx Cy). Если передать больше трёх координат, то это будет уже другая многоугольная фигура.
2. Координаты между разными точками разделяются через запятую.
3. Координаты X и Y одной точки разделяются между собой пробелом.
4. Сначала идёт координата X, после неё через пробел координата Y.
5. Единицы измерения для координат можно указывать в пикселях (px), процентах (%), в пунктах (pt) и даже в rem и em.
6. Ноль можно указывать без единиц измерения.
7. Последовательность указания точек не имеет значения. Можно указывать в последовательности как A, B, C, так и B, A, C и другими возможными последовательностями.

Как определить координаты

Координаты задаются по двухмерной оси. Точка 0 (ноль) находится в левом верхнем углу. Горизонтально с лева на право идёт ось X. Вертикально сверху вниз - ось Y.

Координатная ось XY, в px

На оси указана точка с координатами 200px по оси X и 100px по оси Y. Получается координата у данной точки 200px 100px. Сначала идёт координата X после неё через пробел координата Y. При этом координаты указываются с единицами измерений.

Координатная ось XY, в %

При измерении в процентах, ширина и высота элемента имеют размер 100%. Следовательно половина - это 50%.

В этом примере на оси указана точка с координатами 50% по оси X и 75% по оси Y. Получается координата у данной точки 50% 75%.

Обратите внимание, что у блока в примере ширина имеет динамический размер равный 100%. Поэтому на ней координаты указанные в % будут тоже динамическими и изменять своё положение при изменении размера экрана. Если бы у элемента был статический размер, например width: 300px, то координата по оси X указанная как 50% была бы всегда в точке 150px этой оси.