Как сделать треугольник css

Разбираясь в одном заинтересовавшем меня проекте наткнулся на интересный пример как создать треугольник css. А так как треугольники стали постоянно используемыми элементами веб страницы, то мы должны их уметь создавать.Об этом методе и будет эта заметка.

Погуглив вопрос как сделать треугольник css нашёл ещё несколько интересных методов, но пример из проекта мне понравился больше. Это метод старый и давно известный. Он основан на использовании таких css свойств как border-color и border-width. Суть метода проста. Создаём какой либо блок(div), и и задаём ему css свойства border-color и border-width. Свойство border-width задаёт толщину границы, и принимает четыре значения. Толшину границы сверху, справа, снизу, слева. Напоминаю что при записи этого css свойства отсчёт начинается от верхней границы и идёт по часовой стрелке. Таким образом, что бы создать из нашего блока треугольник вершиной вверх в свойстве border-width запишем верхнюю границу толшиной 0, левую и правую толщиной в половину блока, а нижнюю в тощину блока. С свойством border-color то же я думаю уже стало понятно. Оно тоже принимает четыре значения по сторонам блока. Если у нас треугольник на белом фоне, все границы задаём белым цветом, кроме нижней. Ну а теперь по обыкновению пример. Так как заметка получилась не очень большая решил добавить к треугольнику анимацию на css.

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

                                     
.trianglebox{
    width: 200px;
    height: 110px;
    border: 1px solid #000;
    padding-top: 25px;
    margin: 0 auto;
}
.triangle{
    margin: 0 auto;
    width: 0px;
    height: 0px;
    border-style: solid;
    /*для треугольника css*/
    border-color: #fff #fff #060  #fff;
    border-width: 0px 25px 50px 25px;
    /*для анимации*/
     -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .3s;
    transition: .3s; 
}
.trianglebox:hover > .triangle{
    /*для анимации*/
    border-color: #fff #fff #ccc  #fff;
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

Пример: Для анимации наведите на треугольник

Как видите всё достаточно просто. К недостатку такого метода можно отнести, что треугольнику не получится задать тени и остальные красивости. Но метод прост и кроссбраузерен. Использовать ли его в проектах решать вам.