CODEWITHSUNDEEP
htmlcsscss-shapes
minlare
minlare

Reputation: 2654

Can I create an arrow using background only?

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

Upvotes: 1

Views: 8324

Answers (2)

Weafs.py
Weafs.py

Reputation: 22992

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.

Upvotes: 7

Alex
Alex

Reputation: 6037

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>

Upvotes: 0

Related Questions