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

Question

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

在我的例子中，这是针对 select 下拉列表的，因此不能使用 select 不支持的伪元素。

我知道如果无法仅使用背景，我可以使用 canvas 来实现此目的 - Use <canvas> as a CSS background

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>

此外，请看一下：Using svg as a 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>

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

Can I create an arrow using background only?

html

css

css-shapes