Html 如何使用背景/线性渐变组合创建细箭头？

我想使用背景图像道具，而不是像：after/：before这样的伪元素，除非这是首选方法。这就是我到目前为止所做的：

 .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;
  }

这是一个箭头，但它的位置根本不正确，而且我似乎根本无法使用

背景位置使它真正移动。还有一件事，有没有办法确定这个尺寸

我还注意到箭头有一些不光滑的边缘。它看起来像是用记号笔写的，边缘没有“写”



。选择容器{
背景图像：线性渐变（45度，#F8 50%，透明0），
线性梯度（-45度，#F8 50%，透明0），
线性梯度（45度，#444 53%，透明0），
线性梯度（-45度，#444 53%，透明0）；
背景重复：无重复；
背景色：#F8；
-webkit外观：无；
-moz外观：无；
外观：无；
位置：相对位置；
光标：指针；
填充：10px；
宽度：100px；
大纲：无；
}

状态
我认为在
线性渐变中使用
%
作为单位会导致像素舍入，并使箭头边缘看起来粗糙

相反，您可以使用
px
。您可以通过使用这些值来调整箭头的大小

要重新定位，请使用
背景位置
属性


。选择容器{
背景图像：线性渐变（45度，#F846px，透明0），
线性梯度（-45度，#F8 46px，透明0），
线性梯度（45度，#444 50px，透明0），
线性梯度（-45度，#444 50px，透明0）；
背景重复：无重复；
背景色：#F8；
背景位置：-25px-5px；
-webkit外观：无；
-moz外观：无；
外观：无；
位置：相对位置；
光标：指针；
填充：10px；
宽度：100px；
大纲：无；
}

状态
Hi，你能加入你的HTML并制作一个代码片段吗？Thanks@sol完成！希望有帮助