Могу ли я создать стрелку, используя только фон?

Я ищу способ создать стрелку, используя только фон css.

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

Я знаю, что могу использовать холст для этого, если использование только фона невозможно - ​​Используйте ‹ холст ›в качестве фона CSS


html css css-shapes
person minlare    schedule 23.01.2015    source источник
comment
Не могли бы вы рассказать нам, какой стиль вы хотите достичь? Цвет, размер, по сравнению с ...   -  person Fabrizio Calderan    schedule 23.01.2015
comment
css-tricks.com/snippets/css/css-triangle нереально стрелка, но треугольник ....   -  person Paweł    schedule 23.01.2015
comment
Возможны любые цвета и размеры.   -  person minlare    schedule 23.01.2015
comment
Pawel - это не актуально, так как не использует фоны.   -  person minlare    schedule 23.01.2015
comment
По сути, вы не можете формировать фон. Вы можете применить, возможно, линейный градиент в качестве фонового изображения, но тогда вы также можете использовать реальное изображение.   -  person Paulie_D    schedule 23.01.2015
comment
Я не собираюсь вставлять это в ответ, но как насчет использования шрифта? fortawesome.github.io/Font-Awesome/icons   -  person lharby    schedule 23.01.2015
comment
Поцарапайте это, я подумал, что вы можете просто добавить класс font awesome к любому элементу, но он будет реализовывать его с помощью псевдокласса.   -  person lharby    schedule 23.01.2015

Ответы (2)


arrow_upward
7
arrow_downward

Вы можете использовать linear-gradients, если хотите использовать background.

div {
  width: 40px;
  height: 18px;
  background: linear-gradient(45deg, black 25%, transparent 25%, transparent), linear-gradient(-45deg, black 25%, transparent 25%, transparent), linear-gradient(45deg, transparent 75%, black 75%), linear-gradient(-45deg, transparent 75%, black 75%);
  background-position: 20px 0;
  background-size: 40px 35px;
}
<div></div>

Если вы хотите что-то похожее на знак больше или меньше, используйте svg.

<!--'Greater than' sign-->
<svg width="40" height="50" viewBox="0 0 42 52">
  <path d="M0,0 l40,25 l-40,25" fill="none" stroke="black" />
</svg>

<!--'Less than' sign-->
<svg width="40" height="50" viewBox="0 0 42 52">
  <path d="M40,0 l-40,25 l40,25" fill="none" stroke="black" />
</svg>

<!--'Greater than' sign - Thick stroke-->
<svg width="40" height="50" viewBox="0 0 42 53">
  <path d="M0,0 l40,25 l-40,25" fill="none" stroke="black" stroke-width="3" />
</svg>

<!--'Greater than' sign - Thick stroke-->
<svg width="40" height="50" viewBox="-2 0 42 52">
  <path d="M40,0 l-40,25 l40,25" fill="none" stroke="black" stroke-width="3" />
</svg>

Также обратите внимание на: Использование svg в качестве background-image.

person Weafs.py    schedule 23.01.2015
comment
Есть ли способ уменьшить это до заданного размера / области в пределах фона элемента. Например. создать стрелку размером 20 x 20 пикселей внутри элемента, например, 200 x 200 пикселей @ chipChocolate.py - person minlare; 23.01.2015
comment
Есть ли причина для парней, проголосовавших против? Я считаю, что ответ на заданный вопрос вполне верен. (создавать только с использованием фона) - person Harry; 23.01.2015
comment
Если невозможно ограничить фон с линейным градиентом определенным размером, что может быть лучше с точки зрения производительности - нарисовать стрелку с помощью холста или загрузить изображение? Это говорит о том, что рисование основных фигур будет иметь меньшее влияние на производительность, чем загрузка изображения - stackoverflow.com/questions/3488441/ - person minlare; 23.01.2015
comment
@ chipChocolate.py - Отличные подсказки! Я выбрал svg с кодировкой base64. Отлично работает ... select{ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc4JyBoZWlnaHQ9JzgnPjxwYXRoIGQ9J00wIDIgTDQgNiBMOCAyJyBmaWxsPSdub25lJyBzdHJva2U9J2JsYWNrJyBzdHJva2Utd2lkdGg9JzInIC8+PC9zdmc+) } - person minlare; 23.01.2015

arrow_upward
0
arrow_downward

Вы также можете просто использовать символ ▼ или

<span class="caret"></span>

- добавляется по запросу

<select class="form-control">
  <option default disabled="disabled" >choose ▼</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>
person Alex    schedule 23.01.2015
comment
Можете ли вы показать, как я могу использовать это в элементе select? - person minlare; 23.01.2015
comment
сначала объясните, как вы хотите, чтобы это выглядело. Но я думаю, вам нужно что-то вроде этого: getbootstrap.com/components/#callout-btndropdown-dependency - person Alex; 23.01.2015
comment
Точно, но с использованием стандартного элемента select. - person minlare; 23.01.2015