Стрелка средствами 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): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .

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

	Стрелка средствами CSS 04.01.2017, 22:46. Показов 6353. Ответов 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

Решение