How to create a thin arrow using background/linear-gradient combo?

Question

I want to use the background-image prop instead of doing a pseudo element like :after/:before unless that is the preferred way. This is what I have so far:

 .container select {
    background: linear-gradient(45deg, #fff 50%, transparent 0),
      linear-gradient(-45deg, #fff 50%, transparent 0),
      linear-gradient(45deg, #444 53%, transparent 0),
      linear-gradient(-45deg, #444 53%, transparent 0);
    background-repeat: no-repeat;
  }

It is an arrow, but it isnt positioned correctly at all and I can't seem to get it to move really at all with background-position . Another thing is there a way to size this?

Something else I noticed is that the arrow has some not smooth edges. It looks like it was written with a marker and on the edges it didn't "write".

 .selectContainer { background-image: linear-gradient(45deg, #f8f8f8 50%, transparent 0), linear-gradient(-45deg, #f8f8f8 50%, transparent 0), linear-gradient(45deg, #444 53%, transparent 0), linear-gradient(-45deg, #444 53%, transparent 0); background-repeat: no-repeat; background-color: #f8f8f8; -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; cursor: pointer; padding: 10px; width: 100px; outline: none; } 

 <select type="text" class="selectContainer"> <option value="">state</option> </select> 

Answer 1

I think using % as the unit in your linear-gradient is causing pixel rounding, and making the arrow edges look rough.

Instead, you can use px . You can adjust the size of the arrow by playing around with the values.

To reposition, use the background-position property.

 .selectContainer { background-image: linear-gradient(45deg, #f8f8f8 46px, transparent 0), linear-gradient(-45deg, #f8f8f8 46px, transparent 0), linear-gradient(45deg, #444 50px, transparent 0), linear-gradient(-45deg, #444 50px, transparent 0); background-repeat: no-repeat; background-color: #f8f8f8; background-position: -25px -5px; -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; cursor: pointer; padding: 10px; width: 100px; outline: none; } 

 <select type="text" class="selectContainer"> <option value="">state</option> </select>