Итак, все знают, что можно сделать треугольник, используя это:
#triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
И это дает сплошной закрашенный треугольник. Но как сделать такой треугольник в виде полой стрелки?
html
css
css-shapes
Томмей
источник
источник
Ответы:
Вы можете использовать псевдоэлемент
beforeилиafterи применить к нему некоторый CSS. Есть разные способы. Вы можете добавитьbeforeиafter, и повернуть и расположить каждый из них, чтобы сформировать одну из полос. Более простое решение - добавить две границы только кbeforeэлементу и повернуть его с помощьюtransform: rotate.Прокрутите вниз до другого решения, в котором вместо псевдоэлементов используется реальный элемент.
В этом случае я добавил стрелки как маркеры в список и использовал
emразмеры, чтобы они соответствовали шрифту списка.Конечно, вам не нужно использовать
beforeилиafter, вы можете применить тот же трюк и к обычному элементу. Для приведенного выше списка это удобно, так как дополнительная разметка не требуется. Но иногда вам может понадобиться (или понадобится) разметка. Вы можете использоватьdivилиspanдля этого, и я даже видел, как люди даже использовали этотiэлемент для «значков». Таким образом, разметка может выглядеть так, как показано ниже. Вопрос<i>о том, правильно ли это использовать, является спорным, но вы можете использовать и span для этого, чтобы быть в безопасности.Если вы ищете больше вдохновения, обязательно ознакомьтесь с этой замечательной библиотекой иконок на чистом CSS от Николаса Галлахера . :)
источник
border-color, так как стрелка на самом деле не символ, а граница. Для позиционирования вы можете добавитьposition: relativeстрелку и перемещать ее с помощьюtopиleft. Я показал как в измененном первом фрагменте, так и позиционирование во втором фрагменте. Обратите внимание на красивую комбинацию,li:hover::beforeкоторая относится кbeforeпсевдоэлементу элемента списка при наведении курсора.0сам по себе, поэтому вам понадобится отрицательная маржа, чтобы отменить любые пробелы. Например, во втором фрагменте вы можете добавитьmargin-left: -0.4em;стрелку рядом с предыдущим словом без пробела.Это можно решить намного проще, чем другие предложения.
Просто нарисуйте квадрат и примените
borderсвойство только к 2 соединяющимся сторонам.Затем поверните квадрат в соответствии с направлением, в котором должна указывать стрелка, например:
transform: rotate(<your degree here>)источник
Отзывчивые шевроны / стрелки
они автоматически изменяют размер вместе с вашим текстом и окрашиваются в один цвет. Plug and play :)
демонстрационная площадка jsBin
источник
v. 6.2.0 September 2012 1UnicodeUTF-8увеличивается до 110182, и теперь с HTML5 и UTF-8 по умолчанию и выглядит наш персонаж хорошо выглядит: unicode.org/Public/UNIDATA/UnicodeData.txt\231dперсонаж может быть доступен здесь, но не на Mac или устройстве Android. HTML-версия и кодировка ответа тут не при чем.Вот другой подход:
1) Используйте символ умножения:
××2) Спрячьте половину
overflow:hidden3) Затем добавьте треугольник в качестве псевдоэлемента для наконечника.
Преимущество здесь в том, что никаких преобразований не требуется. (Будет работать в IE8 +)
FIDDLE
источник
Просто используйте до и после псевдоэлементов - CSS
источник
Другой подход с использованием границ и без свойств CSS3 :
источник
>сама по себе очень замечательная стрелка! Просто добавьте к нему div и стилизуйте его.источник
Стрелка влево-вправо с эффектом наведения с помощью трюка с тенями Роко К. Бульяна
источник
Мне нужно было изменить
inputв моем проекте стрелку. Ниже финальная работа.Здесь скрипка
источник
Подобно Roko C, но немного больше контроля над размером и размещением.
источник