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

Question

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

在我的情况下,这是一个选择下拉列表,因此不能使用select不支持的伪元素.

我知道如果不能使用背景,我可以使用canvas来实现这一点 - 使用<canvas>作为CSS背景

Answer 1

linear-gradient如果你想使用,你可以使用s 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>

如果您想要类似于大于或小于符号的内容,请使用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.