Как сделать стрелочку css
Перейти к содержимому

Как сделать стрелочку css

  • автор:

Треугольники, стрелки, квадраты и лимон при помощи свойств CSS border и border-radius

В моей статье про создание кнопки «наверх» меня часто просят, чтобы я дал ссылку на картинку со стрелкой.

А я либо предлагаю использовать HTML-сущность ▲ (в итоге получается такая вот стрелка ▲), либо предлагаю побольше почитать о свойстве CSS border .

В итоге я сам решил написать статью с трюками, которые можно провернуть при помощи свойств border и border-radius .

Трюки со свойствами CSS border и border-radius

Все примеры в статье (кроме этой картинки) написаны на CSS, так что вы легко сможете посмотреть их исходный код.

Свойство border

Для начала давайте разберемся, на что вообще способен border , кроме как очерчивать границу в несколько пикселей вокруг элемента.

1. Треугольник (стрелка)

Возможно вы заметили, что этот пост помечен тегов «Ускорение сайта», вопрос — почему? Ответ кроется в том, что обычно, для создания стрелок на сайте, вебмастера используют картинки, более опытные используют спрайты или иконочные шрифты.

Но в рунете пока что чаще всего встречается именно тот вариант, в котором для каждой стрелки и каждого элемента интерфейса используется отдельная картинка, а каждая картинка — это отдельный HTTP-запрос, а значит минус к скорости загрузки сайта. Чем меньше таких запросов, тем выше скорость загрузки. Именно поэтому для создания стрелок и указателей более рационально использовать CSS (впервые такую фишку я заметил у гугла).

Рассмотрим теперь пример.

a href="#top">span style="color: #c1ef65;">"arr">span> наверхa>

CSS:
Только для стрелки, со ссылкой думаю вы и сами справитесь.

span.arr{ vertical-align: middle; margin: 0 5px; display: inline-block; width: 0; height: 0; border-top: 4px solid #96887E; border-left: 4px solid transparent; border-right: 4px solid transparent; }

Довольно неплохо, верно? Кроме того, эту стрелку вы можете сделать как пошире, так и поуже.

А теперь посмотрим на другие примеры.

2. Квадрат

HTML:
Необязательно использовать именно , можете взять вместо него , если хотите.

span style="color: #c1ef65;">"square">span>

CSS:
Как видите, стилей совсем немного, всё легко и просто.

span.square { width: 0; height: 0; display:inline-block; border: 40px solid; border-color: yellow green blue red; /* квадрат будет состоять из четырех разноцветных треугольников */ }

Свойство border-radius

1. Лимон

Весь HTML будет точно такой же, как и в предыдущем примере, мы лишь изменим класс элемента на lemon .

span.lemon { width: 200px; height: 200px; display:inline-block; background: #F5F240; border: 5px solid #F0D900; -moz-border-radius: 10px 150px 30px 150px; -webkit-border-radius: 10px 150px 30px 150px; border-radius: 10px 150px 30px 150px; }

В итоге получаем вот такой красивый лимон:

2. Блоки с речью

Для каждого из четырех последующих примеров будет использоваться следующий общий HTML и CSS:

span style="color: #c1ef65;">"talk">Привет, чувак!span>
span.talk{ display:inline-block; position: relative; background: #A0A0A0; width: 150px; height: 50px; line-height: 50px; color:#fff; text-align: center; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; } span.talk:after{ content: ''; position: absolute; width: 0; height: 0; border: 10px solid; }

Теперь поглядим на каждый из примеров по отдельности, то есть сейчас в каждом случае к тем общим стилям будут добавляться эти несколько строчек кода.

В 1-м варианте стрелка находится внизу:

span.talk:after { border-color: #A0A0A0 transparent transparent transparent; top: 100%; left: 50%; margin-left: -10px; }

Привет, чувак!

Для того, чтобы расположить стрелку в верхней части блока, просто меняем стили CSS из предыдущего варианта на:

span.talk:after { border-color: transparent transparent #A0A0A0 transparent; bottom: 100%; left: 50%; margin-left: -10px; }

Привет, чувак!

Если же вам понадобится использовать несколько разновидностей блока, например все четыре варианта, то помимо класса talk пропишите к каждому элементу ещё по одному классу, например top, right, bottom, left.

В этом же примере стрелка находится справа:

span.talk:after { border-color: transparent transparent transparent #A0A0A0; top: 50%; left: 100%; margin-top: -10px; }

Привет, чувак!

И последний, 4-й вариант со стрелкой слева:

span.talk:after { border-color: transparent #A0A0A0 transparent transparent; top: 50%; right: 100%; margin-top: -10px; }

Привет, чувак!

3. Радиация CSS

HTML:
Как видите, во всех примерах (кроме блоков с речью) HTML практически не отличается, меняются только классы, хотя и их можно оставить одинаковыми, если вы не намерены использовать сразу всё это на одной странице.

span style="color: #c1ef65;">"biohazard">span>

CSS:
Стили практически такие же, которые мы использовали при создании квадрата, но здесь ещё также присутствует свойство border-radius.

.biohazard { display:inline-block; width: 0; height: 0; border: 55px solid; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; border-color: black yellow black yellow; }

Ещё по теме CSS

  • Удобный CSS оптимизатор для работы на каждый день
  • 15 красивых и эффектных CSS3 кнопок
  • Что такое CSS-спрайты и для чего они нужны?

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

HTML: Как сделать стрелку влево или вправо. Спецсимволы стрелочки.

Интернет-магазин дождевиков

Создать сайт
Красивый дизайн и удобное управление для каждого сайта.

Создать интернет магазин
Современная торговля приносящая прибыль.

Продвинуть сайт
Продвижение в поисковых системах и социальных сетях.

Отдел Архитектурной визуализации

Архитектурная мастерская

Отдел 3D и 2D анимации

BALLISTART
Вопрос:

Как сделать стрелочки вправо или влево чтобы они были символами а не картинками?

Ответ:

Для этого существуют спецсимволы:

& rarr; — стрелочка вправо →
& larr; — стрелочка влево →
& uarr; — стрелочка вверх ↑
& darr; — стрелочка вниз ↓
& harr; — стрелочка туда-сюда ↔

Мы предлагаем!

Создать сайт
Красивый дизайн и удобное управление для каждого сайта.

Создать интернет магазин
Современная торговля приносящая прибыль.

Продвинуть сайт
Продвижение в поисковых системах и социальных сетях.

Отдел Архитектурной визуализации

Сделать стрелку :after шире

он создает стрелку: Сама стрелка сплющенная, а нужно, чтобы наоборот была широкая. Как это сделать?

Отслеживать
задан 2 янв 2022 в 14:52
9 2 2 бронзовых знака
Не использовать вместо стрелки символ, а взять нормальную картинку, и вставлять через background
2 янв 2022 в 14:56

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

      Document  

Отслеживать
ответ дан 2 янв 2022 в 16:34
2,359 1 1 золотой знак 12 12 серебряных знаков 34 34 бронзовых знака
Это должна быть стрелка в селекте, а не сама по себе, так что тэг p не подойдет)
2 янв 2022 в 17:56
@Alex, вам ничего не мешает заменить p на ::after
3 янв 2022 в 3:47

Если проблема лишь в пропорциях символа, то вполне можно это подправить с помощью transform: scale() :

.custom-select::after

Отслеживать
ответ дан 3 янв 2022 в 0:35
33.9k 6 6 золотых знаков 29 29 серебряных знаков 71 71 бронзовый знак

  • html
  • css
    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.2.16.5008

Закруглённые стрелки «Назад» и «Вперёд» для навигации

Простые ссылки вперёд/назад для навигации с закруглеными стрелками на CSS3. В создании стрелок использовался обычный элемент div и два псевдо-элемента :after и :before. А сами закругления сделаны с помощью border-radius для псевдо-элементов.

Давайте посмотрим код.

HTML:

#next, #prev < padding: 0.5em 1.5em >#next < text-align: right >#next:before, #next:after, #prev:before, #prev:after < background: #333; -moz-border-radius: 0.25em; -webkit-border-radius: 0.25em; border-radius: 0.25em; content: ""; display: block; height: 0.5em; position: absolute; right: 0; top: 50%; width: 1em; >#prev:before, #prev:after < left: 0 >#next:before, #prev:before < -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); >#next:after, #prev:after < -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); >#prev:after, #next:before < margin-top: -.36em >#next:hover, #next:focus, #prev:hover, #prev:focus < color: #c00 >#next:hover:before, #next:hover:after, #next:focus:before, #next:focus:after, #prev:hover:before, #prev:hover:after, #prev:focus:before, #prev:focus:after < background: #c00 >/* container styles */ nav

Не поддерживаются браузеры:

  • Mozilla Firefox 3.5 и ниже.
  • Internet Explorer 8.0 и ниже.
  • Opera 10.0 и ниже.
P.S. Это тоже может быть интересно:
  • CSS-выражения от контейнера для дизайнеров
  • CSS COLORS
  • Тёмная сторона CSS: выходим за рамки и взрываем звезды с border-image и градиентами

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *