На красивых и современных веб-страницах очень часто содержится довольно много привлекательных графических элементов. Среди них довольно часто используется такая простая геометрическая фигура, как треугольник. Его используют для дизайна множества элементов. Так, например, треугольник может быть использован в качестве указателя на определенный объект на странице, чтобы посетитель сайта обращал на него внимание. Основная функция, которую выполняет треугольник, декоративная. Блоки, благодаря использованию данных элементов, становятся более привлекательными и современными. Однако далеко не все знают, как можно создавать такие фигуры посредством использования каскадных таблиц стилей. По этой причине многих сегодня интересует вопрос, как самостоятельно сделать треугольник CSS.
Использование треугольника CSS в оформлении сайтов
Треугольники довольно часто встречаются в веб-дизайне. С помощью этих элементов оформляются подсказки, индикатор процесса загрузки и меню. Если раньше без этих элементов вполне можно было обойтись, то сегодня это невозможно. Разработчики просто обязаны приспосабливаться к данным требованиям. Сегодня треугольник, созданный в CSS, является важнейшей частью в построении взаимной связи между различными частями интерфейса и объединении их в одно целое. Многие верстальщики не могут понять, что делать, когда к ним поступает макет, в дизайне которого используются одни треугольники. Здесь нет свойств, которые задавали бы эту геометрическую фигуру напрямую. На самом деле существует несколько методов создания треугольника CSS.
Способ создания треугольника CSS при помощи рамки
Первый метод, который позволяет создавать треугольник CSS, это border. Заключается данный метод в использовании рамки. Несмотря на то, что границы, создаваемые при помощи свойства border, не имеют к треугольнику никакого отношения, именно они чаще всего используются для этой цели. При задании нулевых ширины и высоты объекта, а также при установке толстой границы, можно различить квадрат, состоящий из равных треугольников. В данном случае хитрость состоит в том, что необходимо оставить только нужную вам границу, а все остальные сделать прозрачными. В результате получится нарисованный в CSS треугольник нужного цвета и направления. Создавать углу с помощью свойства «рамки» довольно удобно, поскольку в данном случае отсутствует необходимость в рисовании картинки при использовании графических редакторов. Параметры треугольника можно довольно просто изменить в коде. Это сэкономит разработчику время. Путем комбинации различной ширины рамки получить нужную фигуру довольно просто. Чтобы понять, как же это функционирует, необходимо просто создать пустой элемент с нулевой шириной, высотой и толстой рамкой различного цвета с каждой стороны. Если сделать три стороны из четырех прозрачными, то могут получиться треугольники различных видов: равносторонний треугольник, смотрящий влево, сплющенный треугольник, смотрящий влево, вытянутый треугольник, смотрящий влево, прямоугольный треугольник с прямым углом слева, треугольник, смотрящий вниз, треугольник, смотрящий вверхи еще множество разновидностей.
Использование псевдоэлементов
При помощи таких приемов можно создавать у всплывающих подсказок и указаний уголки. Чтобы прикрепить треугольник к блоку посредством CSS, программисты чаще всего используют такие псевдоэлементы как beforeи after.Если использовать их вместо, то можно нарисовать в CSS треугольник, который имеет обводку. Путем их комбинации можно создать множество красивых стрелок, применяя к родительскому элементу свойство position:relative. Это делается для того,чтобы псевдоэлементы со своих мест не съехали. Преимуществами использования рамки CSS для создания треугольников стали следующие факторы:
— быстрое и легкое редактирование цвета и размера при помощи свойств;
— поддержка всеми интернет-браузерами
К недостаткам использования рамки для создания треугольников можно отнести:
— отсутствие возможности применить градиенты и тени;
— в некоторых случаях, когда пользователь просматривает страницы в браузере Firefox, значение прозрачности может не сработать. Это будет искажать картинку.
Использование готовых картинок
Следующий метод заключается в использовании закодированной картинки. Треугольник необходимо заранее нарисовать в графическом редакторе, а после этого конвертировать при помощи специализированных сервисов в специальный код. Преимущество данного метода состоит в том, что с его помощью можно сделать очень красивый дизайн с тенями, рамкамии градиентами. Затем все можно просто закодировать. К недостаткам данного метода можно отнести тот фактор, что не все пользователи в совершенстве владеют графическими программами. Плюс ко всему, если изображение имеет довольно большой размер, то строка кода получается огромной. Для разработчика это не слишком удобно. Использование браузеров InternetExplorer старых версий стоит отдельным пунктом. В этих браузерах данный метод просто не будет работать.
Метод перевернутого квадрата
Еще одним способов является создание перевернутого квадрата средствами CSS. В данном случае вам потребуется два блока. Некоторые предпочитают использовать псевдоэлементы. Для начала необходимо создать квадрат. Он будет являться содержимым поворачиваемого элемента. Затем квадрат необходимо развернуть на 45 градусов, чтобы он стал похож на алмаз. После этого выполняется сдвиг вверх. Внешний блок срывается с помощью свойства overflow: hidden. Такое решение не является кроссбраузерным. В некоторых случаях картинка отображается не так, как изначально было задумано.
Заключение
Как вы уже поняли, существует несколько способов создания треугольника. Чтобы не потеряться во всех свойствах CSS, пользуйтесь справочником, в котором описаны все свойства каскадных таблиц стилей.