Стрелка средствами CSS

@Dmitrin · Регистрация: 04.12.2012

Студворк — интернет-сервис помощи студентам

Здравствуйте. Подскажите, как сделать подобную стрелку средствами CSS (Я так понимаю, через before и after)?

@mrtoxas · 04.01.2017, 23:47

Если в этом шрифте стрелка подходящая, то через after, если стрелку рисовать надо, тогда линиями через before и after.

@Dmitrin · 04.01.2017, 23:49 **[ТС]**

Вот линиями и хотел узнать, как сделать)

@Black_Star · 04.01.2017, 23:51

.block:after{
content: ">";
margin-left: 20px;
}

@Dmitrin · 05.01.2017, 00:11 **[ТС]**

Не, просто стрелкой не подходит. Нужно именно вырисовать)

@mrtoxas · 05.01.2017, 00:33

Dmitrin, how-to-make-a-fancy-arrow-using-css

@thedude · 05.01.2017, 00:37

А не проще нарисовать в фотошопе и вставить в блок через :after? чем извращаться и строить их путем линий и позиционирования?

@Dmitrin · 05.01.2017, 00:41 **[ТС]**

thedude, Проблема в том, что текст может быть разного текста. И нужно, чтобы без проблем можно было менять цвет стрелки

@thedude · 05.01.2017, 00:45

Извиняюсь, не подумал что то

@Dmitrin · 05.01.2017, 00:45 **[ТС]**

mrtoxas, Отлично, то, что нужно)) Спасибо)

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .

@Dmitrin 23 / 23 / 11 Регистрация: 04.12.2012 Сообщений: 579

	Стрелка средствами CSS 04.01.2017, 22:46. Показов 6356. Ответов 9 Метки нет (Все метки) Здравствуйте. Подскажите, как сделать подобную стрелку средствами CSS (Я так понимаю, через before и after)? Миниатюры 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	04.01.2017, 23:47
	Если в этом шрифте стрелка подходящая, то через after, если стрелку рисовать надо, тогда линиями через before и after. 1

@Dmitrin 23 / 23 / 11 Регистрация: 04.12.2012 Сообщений: 579
	04.01.2017, 23:49 [ТС]
	Вот линиями и хотел узнать, как сделать) 0

@Black_Star 23 / 22 / 17 Регистрация: 06.05.2016 Сообщений: 260
	04.01.2017, 23:51
	.block:after{ content: ">"; margin-left: 20px; } 1

@Dmitrin 23 / 23 / 11 Регистрация: 04.12.2012 Сообщений: 579
	05.01.2017, 00:11 [ТС]
	Не, просто стрелкой не подходит. Нужно именно вырисовать) 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	05.01.2017, 00:33
	Сообщение было отмечено Dmitrin как решение Решение Dmitrin, how-to-make-a-fancy-arrow-using-css 3

@thedude 36 / 37 / 23 Регистрация: 31.05.2014 Сообщений: 131
	05.01.2017, 00:37
	А не проще нарисовать в фотошопе и вставить в блок через :after? чем извращаться и строить их путем линий и позиционирования? 0

@Dmitrin 23 / 23 / 11 Регистрация: 04.12.2012 Сообщений: 579
	05.01.2017, 00:41 [ТС]
	thedude, Проблема в том, что текст может быть разного текста. И нужно, чтобы без проблем можно было менять цвет стрелки 0

@thedude 36 / 37 / 23 Регистрация: 31.05.2014 Сообщений: 131
	05.01.2017, 00:45
	Извиняюсь, не подумал что то 0

@Dmitrin 23 / 23 / 11 Регистрация: 04.12.2012 Сообщений: 579
	05.01.2017, 00:45 [ТС]
	mrtoxas, Отлично, то, что нужно)) Спасибо) 0

Стрелка средствами CSS

Решение