Как сделать треугольник через CSS

Всем привет! Раньше верстальщики практически все элементы дизайна вырезали в Фотошопе из PSD макета, в том числе и треугольники – маленькие и больше, – неважно. Просто не было возможности прописать их кодом. Сейчас HTML5 повелевает отрабатывать свои навыки в CSS3 и с его помощью создавать любую фигуру.

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

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

Для начала, в HTML файле создайте блок с классом одного из треугольников ниже, например:

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

Затем в CSS файл скопируйте код с выбранным классом.

Треугольник вершиной вверх

.triangle-top {
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 200px solid #f95959;
}

Треугольник вершиной вниз

.triangle-bottom {
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-top: 200px solid #f95959;
}

Треугольник вершиной влево

.triangle-left {
    width: 0;
    height: 0;
    border-top: 100px solid transparent;
    border-right: 200px solid #5cb85c;
    border-bottom: 100px solid transparent;
}

Треугольник вершиной вправо

.triangle-right {
    width: 0;
    height: 0;
    border-top: 100px solid transparent;
    border-left: 200px solid #5cb85c;
    border-bottom: 100px solid transparent;
}

Верхний левый угол

.triangle-top-left {
    width: 0;
    height: 0;
    border-top: 200px solid #f0ad4e;
    border-right: 200px solid transparent;
}

Верхний правый угол

.triangle-top-right {
    width: 0;
    height: 0;
    border-top: 200px solid #f0ad4e;
    border-left: 200px solid transparent;
}

Нижний левый угол

.triangle-bottom-left {
    width: 0;
    height: 0;
    border-bottom: 200px solid #5bc0de;
    border-right: 200px solid transparent;
}

Нижний правый угол

.triangle-bottom-right {
    width: 0;
    height: 0;
    border-bottom: 200px solid #5bc0de;
    border-left: 200px solid transparent;
}

Сначала непонятно, причем тут border.. но немного практики и все становится на свои места.

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

Как много фигур можно создать с помощью CSS, для любителей кода это очень увлекательное занятие! А потом бы еще сделать анимацию… Буду развивать направление рисунков и анимации в CSS и JS.

Надеюсь, вам было интересно? 🙂 Пока!