<MyRusakov.ru />

WordPress 6 с Нуля до Гуру

WordPress 6 с Нуля до Гуру

Этот курс научит Вас созданию самых разных сайтов на самой популярной в мире CMS - WordPress. Вы увидите установку и настройку локального сервера, разбор каждой настройки, каждой кнопки и каждого пункта меню в панели WordPress.

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

Помимо уроков к курсу идут упражнения для закрепления материала.

И, наконец, к курсу идёт ценнейший Бонус по тому, как используя ChatGPT и создавая контент для сайта, можно выйти на пассивный доход. Вы наглядно увидите, как зарегистрироваться в ChatGPT (в том числе, и если Вы из России), как правильно выбрать тему для сайта, как правильно генерировать статьи для него(чтобы они индексировались поисковыми системами) и как правильно монетизировать трафик на сайте.

Подробнее
Подписка

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

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Как нарисовать треугольник на CSS

Как нарисовать треугольник на 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 способа.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (6):

sync.o sync.o 15.10.2012 10:32:53

Чтобы треугольник css-м был прозрачным, нужно и в border-color указать не #fff, а transparent

Ответить

malina95 malina95 21.10.2012 16:24:18

а как вправо повернуть?

Ответить

Maks4ever Maks4ever 31.12.2014 12:35:11

не работает 2-й способ, border-width 4 означает Поочередно устанавливается толщину верхней, правой, нижней и левой границы. ни о каком треугольнике речь не идёт это просто пустой блок, border-color задаёт цвета границ этого блока по 4-м сторонам и на моём хосте никакого треугольника не отображается, border-width это ширина границы блока а не ширина блока

Ответить

Maks4ever Maks4ever 31.12.2014 13:29:06

Почитайте статью Мержевича на этот счёт 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

Ответить

polkovnik polkovnik 08.02.2015 16:47:47

а как этот треугольник поместить в нужное место, например, справа от текста в пункте меню ?

Ответить

popuser popuser 29.06.2018 16:16:34

Добрый день, дополнительные способы создания треугольников есть [URL="https://pop-code.ru/css/treugolnik-css-kvadrat-i-shestiugolnik-sozdanie-figur-cherez-css-it-blog-popcode/"]здесь [/URL]

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.