Дек
Как сделать треугольник 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); }
Пример: Для анимации наведите на треугольник
Как видите всё достаточно просто. К недостатку такого метода можно отнести, что треугольнику не получится задать тени и остальные красивости. Но метод прост и кроссбраузерен. Использовать ли его в проектах решать вам.