时间戳

首页 > 解决方案 > 如何使用背景/线性渐变组合创建细箭头？

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

问题描述

我想使用 background-image 道具而不是像 :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>

标签： htmlcss

解决方案

我认为%在你的单位中使用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>

推荐阅读