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

Question

我想使用background-image prop代替做一个伪元素，比如：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;
  }

这是一个箭头，但它根本没有正确定位，我似乎无法使用background-position真正地移动它。另一件事是有一种方法来规模吗？

我注意到的其他事情是箭头有一些不光滑的边缘。看起来它是用标记写的，边缘上没有“写”。

.selectContainer {
  background-image: linear-gradient(45deg, #f8f8f8 50%, transparent 0),
      linear-gradient(-45deg, #f8f8f8 50%, transparent 0),
      linear-gradient(45deg, #444 53%, transparent 0),
      linear-gradient(-45deg, #444 53%, transparent 0);
  background-repeat: no-repeat;
  background-color: #f8f8f8;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  cursor: pointer;
  padding: 10px;
  width: 100px;
  outline: none;
}

<select type="text" class="selectContainer">
  <option value="">state</option>
</select>

Answer 1

我认为使用%作为linear-gradient中的单位会导致像素舍入，并使箭头边缘显得粗糙。

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

要重新定位，请使用background-position属性。

＆＃13;

＆＃13;

.selectContainer {
  background-image: linear-gradient(45deg, #f8f8f8 46px, transparent 0),
      linear-gradient(-45deg, #f8f8f8 46px, transparent 0),
      linear-gradient(45deg, #444 50px, transparent 0),
      linear-gradient(-45deg, #444 50px, transparent 0);
  background-repeat: no-repeat;
  background-color: #f8f8f8;
  background-position: -25px -5px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  cursor: pointer;
  padding: 10px;
  width: 100px;
  outline: none;
}

＆＃13;

<select type="text" class="selectContainer">
  <option value="">state</option>
</select>

＆＃13;

＆＃13;

＆＃13;