Создайте толстую стрелку, используя только HTML / CSS

Question

Есть ли способ создать 4 толстые стрелки, направленные вверх, вниз, влево и вправо, используя только html и css?Очень просто создать стержень стрелки, используя s и границы ... Это диагональные линии головы стрелки, которые я не знаю, как это сделать.

Мне это нужно для работы в IE7 +и все современные браузеры.Я использую jQuery и рад зависеть от этого.Это должно быть тесно интегрировано с другими элементами HTML, поэтому я не хочу использовать что-то вроде Рафаэля для его рисования.Изображения проблематичны, потому что их трудно плавно увеличить.

Я пробовал символы Юникода для стрелок (html-объекты ⇦, ⇧, ⇨ и ⇩).Это было бы решением, но они отображаются очень по-разному в каждом браузере.Другие проблемы, связанные с этим, включают неспособность по крайней мере сделать внутреннюю часть стрелок непрозрачной.

В идеале я могу заполнить стрелки градиентом.

Answer 1

Ну, вы все еще можете использовать ⇦, т.е. тот, который вы указали в своем вопросе.

Если вы хотите, чтобы они выглядели больше, измените размер шрифта с помощью css.

http://jsfiddle.net/yd9gf/

Также
Сборка только с использованием css;) http://jsfiddle.net/xJrpq

А вот код для версии css

HTML

<div class="b"></div>

CSS

.b {
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 60px solid black;
    width: 0;
    height: 0;
}

Answer 2

Вы пробовали эти стрелки?

↑↓←→↔↕

Юникод: 2190 -> 2195

Answer 3

Коротко и просто

Использовать HTML-коды

→ (→ или →)
← (← или ←)
↑ (↑ или ↑)
↓ (↓ или ↓)

Пример: a → b → c
код приведенного выше примера: a→b→c

если вам нужно больше таких кодов, то обратитесь: http://character -code.com / arrow-html-codes.php

Надеюсь, это поможет.

Answer 4

На этот вопрос ответили довольно хорошо, но как насчет простых кодов, таких как: ▼ (это ▼)

http://www.fileformat.info/info/unicode/char/25bc/index.htm

http://www.fileformat.info/info/unicode/char/25b2/index.htm

http://www.fileformat.info/info/unicode/char/25ba/index.htm

http://www.fileformat.info/info/unicode/char/25c4/index.htm

Answer 5

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

К тому времени, как будут загружены другие файлы решений, вы, вероятно, будете иметь тот же размер или больше, чем оптимизированное изображение.В любом случае изображения абсолютно надежны и работают во всех браузерах;Эзотерическое решение, хотя и интересно создавать, может быть кошмаром поддержки (никто никогда не жалуется в Интернете, поэтому вы не узнаете, когда оно сломалось).

Answer 6

Я бы, вероятно, выбрал svg в этом случае, и для удовлетворения ваших требований IE 7 я бы использовал vml в качестве запасного варианта. Есть инструменты конвертации для svg в vml. Также оба изображения работают аналогично изображениям, но при использовании масштабирования они выглядят неплохо, поскольку они представляют собой векторную графику.

Посмотрите здесь, если вам нравится этот путь: http://vectorconverter.sourceforge.net/

Answer 7

Другое решение заключается в следующем:

span { font-weight: bold; letter-spacing: -5px}

<span>&#61;&#62;</span>

выглядит так: =>

(выглядит лучше, когда применяется стиль, чего, похоже, здесь нет)

Answer 8

У вас есть много вариантов.

• Вариант 1: шрифт Webdings: http://en.wikipedia.org/wiki/Wingdings
• Вариант 2: настраиваемый загружаемый шрифт CSS
• Вариант 3: уменьшенное изображение или изображение с высоким разрешением
• Вариант 4: SVG встроенный или как изображение
• Вариант 5: любое из перечисленного выше поворачивается с использованием CSS-преобразований

Вариант 2, вероятно, самый надежный. Опция 5 - поддержка в IE7 с использованием расширений MS-поставщиков, таких как фильтры и режим записи.

.rotated {
-moz-transform: rotate(90deg);
-moz-rotation-point: 0 0;
-webkit-transform: rotate(90deg);
-webkit-rotation-point: 0 0;
-o-transform: rotate(90deg);
-ms-writing-mode: tb-lr;
* html writing-mode: tb-lr;
}

Answer 9

Вы также можете попробовать сделать так, чтобы два прямоугольника приравнивали их к диаметрам, и создавали прямоугольник позади них, устанавливая границы тоже 1px