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

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 属性。

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

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