Как нарисовать треугольник на CSS
Одной из очень частых задач, которая встаёт перед верстальщиком, это рисование треугольников на CSS. Например, они могут быть на сворачивающихся и разворачивающихся блоках, на выпадающих меню, на каких-то других элементах интерфейса. И в этой статье я покажу самые оптимальные варианты рисования треугольника на CSS.
1-й способ
Создание простого изображения со стрелкой (например, вырезка из дизайна). Этот способ я сам постоянно использую, и знаю, что он является самым-самым популярным, и в некоторых случаях единственным. Но здесь есть большой минус, если делать прозрачные места у треугольника, то надо использовать PNG, который IE6 не поддерживает. А если брать JPG, то в зависимости от фона нужно брать то или иное изображение. В итоге, может быть 100 одинаковых стрелок, у которых разный фон, в итоге, будет 100 изображений.
2-й способ
Этот способ уже использует чистый CSS, он очень простой, но красивые уголки (например, с тенями, градиентами, с какими-нибудь сложными рисунками) на нём не сделаешь:
.triangle {
border-color: #000 #fff #fff #fff;
border-style: solid;
border-width: 10px 5px 0 5px;
height: 0;
width: 0;
}
Далее к обычному блоку div можно применить класс triangle, в результате данный блок станет стрелкой чёрного цвета (#000). Размеры можно регулировать через свойство border-width. Вот об этом способе многие из Вас даже не слышали, поэтому если стрелка простенькая, то это наилучший способ.
Другие способы
Время от времени я с ними сталкиваюсь, но сам не использую их, поскольку ни один из них не является кроссбраузерным. Все они используют CSS3 и/или HTML5, которые, увы, ещё очень плохо поддерживаются даже современными браузерами, а про старые и говорить не приходится. Поэтому рекомендую Вам использовать на данный момент пока только первые 2 способа.
-
Создано 15.10.2012 08:41:58
-
Михаил Русаков
Комментарии (6):
Чтобы треугольник css-м был прозрачным, нужно и в border-color указать не #fff, а transparent
Ответить
а как вправо повернуть?
Ответить
не работает 2-й способ, border-width 4 означает Поочередно устанавливается толщину верхней, правой, нижней и левой границы. ни о каком треугольнике речь не идёт это просто пустой блок, border-color задаёт цвета границ этого блока по 4-м сторонам и на моём хосте никакого треугольника не отображается, border-width это ширина границы блока а не ширина блока
Ответить
Почитайте статью Мержевича на этот счёт http://htmlbook.ru/blog/treugolniki-cherez-css, а пример в этой статье нужно дополнить вот так: .triangle { border-color: transparent; border-style: solid; border-width: 20px; border-left-color:green; border-left-style: solid; border-left0width: 20px; height: 0; width: 0; } причём важна последовательность в начале указываются свойства для border а потом для border-left
Ответить
а как этот треугольник поместить в нужное место, например, справа от текста в пункте меню ?
Ответить
Добрый день, дополнительные способы создания треугольников есть [URL="https://pop-code.ru/css/treugolnik-css-kvadrat-i-shestiugolnik-sozdanie-figur-cherez-css-it-blog-popcode/"]здесь [/URL]
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.