Can I create an arrow using background only?

Question

I am looking for a way to create an arrow using css backgrounds only.

In my case this is for a select dropdown, so cannot use pseudo elements which are not supported by select.

I am aware I could use canvas to achieve this if using backgrounds only is not possible - Use <canvas> as a CSS background

Could you tell us the style you want to achieve? Color, size, versus... — Fabrizio Calderan, Jan 23 '15 at 11:47
http://css-tricks.com/snippets/css/css-triangle/ not real arrow but triangle.... — Paweł, Jan 23 '15 at 11:48
Pawel - this is not relevant as it does not use backgrounds. — minlare, Jan 23 '15 at 11:50
Basically you cannot "shape" backgrounds. You can apply, perhaps a linear gradient as a background image but then you might as well use an actual image. — Paulie_D, Jan 23 '15 at 11:52
I am not going to put this in an answer but what about using a font? http://fortawesome.github.io/Font-Awesome/icons/ — lharby, Jan 23 '15 at 12:18
Scratch that, I thought you could simply add the font awesome class to any element, but it will implement it using a pseudo class. — lharby, Jan 23 '15 at 12:24

Weafs.py · Accepted Answer · 2015-01-23T12:49:32.467

7

You could use linear-gradients, if you want to use 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>

If you want something similar to greater than or less than sign, use 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>

Also, take a look at: Using svg as a background-image.

edited Jan 23 '15 at 12:49

answered Jan 23 '15 at 11:55

Weafs.py

22,731
9
56
78

Is there a way to reduce this to a set size / area within the element's background. Eg. create a 20px x 20px arrow within an element that is say 200px x 200px @chipChocolate.py – minlare Jan 23 '15 at 12:12
3

Any reason for the down-vote guys? I believe the answer is quite valid to the question asked. (*create using background only*) – Harry Jan 23 '15 at 12:16
If its not possible to restrict the linear-gradient background to a specific size, what would be better performance wise - to draw the arrow using canvas or load an image? This suggests that drawing basic shapes would have less impact on performance than loading the image - http://stackoverflow.com/questions/3488441/html5-canvas-performance-loading-images-vs-drawing – minlare Jan 23 '15 at 12:29
1

@chipChocolate.py - Great tips! I opted for svg encoded to base64. Works great... `select{ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc4JyBoZWlnaHQ9JzgnPjxwYXRoIGQ9J00wIDIgTDQgNiBMOCAyJyBmaWxsPSdub25lJyBzdHJva2U9J2JsYWNrJyBzdHJva2Utd2lkdGg9JzInIC8+PC9zdmc+) } ` – minlare Jan 23 '15 at 13:22

Alex · Answer 2 · 2015-01-23T12:32:10.110

0

You could also just use the ▼ character, or

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

-- added on request

<select class="form-control">
  <option default disabled="disabled" >choose ▼</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

edited Jan 23 '15 at 12:32

answered Jan 23 '15 at 12:11

Alex

5,759
1
32
47

Can you show how would I use this within a select element? – minlare Jan 23 '15 at 12:13
1

explain what you want it to look like first. But I guess you want something like this : http://getbootstrap.com/components/#callout-btndropdown-dependency – Alex Jan 23 '15 at 12:18
Exactly, but using standard select element. – minlare Jan 23 '15 at 12:26

Can I create an arrow using background only?

2 Answers2