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
You could use linear-gradient
s, 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
.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.