css下拉箭头的制作

使用伪元素创建下拉箭头

通过CSS的::after伪元素结合边框属性实现箭头效果。设置元素的position: relative，并为伪元素添加透明边框和实色底部/右侧边框，通过旋转或调整边框宽度形成箭头形状。

.dropdown {
  position: relative;
  padding-right: 20px;
}
.dropdown::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 5px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #333;
  transform: translateY(-50%);
}

使用SVG内联图标

直接在HTML中嵌入SVG代码，通过CSS控制尺寸和颜色。这种方法支持矢量缩放且颜色可定制。

<div class="dropdown">
  Select
  <svg class="arrow" viewBox="0 0 24 24" width="12">
    <path d="M7 10l5 5 5-5z" fill="currentColor"/>
  </svg>
</div>

.arrow {
  margin-left: 8px;
  transition: transform 0.3s;
}
.dropdown.active .arrow {
  transform: rotate(180deg);
}

使用CSS背景图像

通过background-image属性添加预制的箭头图标，适合使用图标库或自定义图片的情况。

.dropdown {
  background-image: url('data:image/svg+xml;utf8,<svg...></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  padding-right: 30px;
}

旋转字符模拟箭头

利用Unicode字符（如▼）或字体图标，通过CSS旋转实现动态效果。

<div class="dropdown">
  Menu <span class="arrow">▼</span>
</div>

.arrow {
  display: inline-block;
  transition: transform 0.2s;
  margin-left: 5px;
}
.dropdown:hover .arrow {
  transform: rotate(180deg);
}

结合下拉交互的完整示例

实现可交互的下拉菜单时，需配合JavaScript切换类名控制箭头方向。

<div class="dropdown-container">
  <button class="dropdown-btn">
    Options <span class="arrow"></span>
  </button>
  <ul class="dropdown-menu">
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

.arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid black;
  transition: transform 0.3s;
}
.dropdown-container.active .arrow {
  transform: rotate(180deg);
}
.dropdown-menu {
  display: none;
}
.dropdown-container.active .dropdown-menu {
  display: block;
}

document.querySelector('.dropdown-btn').addEventListener('click', function() {
  this.parentElement.classList.toggle('active');
});