我可以仅使用背景创建箭头吗？

Question

我正在寻找一种仅使用css背景创建箭头的方法。

在我的情况下，这是用于选择下拉列表的，因此不能使用选择不支持的伪元素。

我知道，如果不能仅使用背景，可以使用canvas实现此目的- 将<canvas>用作CSS背景

Answer 1

如果要使用background ，则可以使用linear-gradient 。

 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 。

Answer 2

您也可以只使用▼字符，或者

<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>