css绘制下拉框头部三角(分实心/空心)

在CSS中，您可以使用伪元素和边框来绘制下拉框头部的三角形。以下是实现实心和空心三角形的示例代码：

实心三角形:

/* 实心三角形的样式 */
.dropdown-header .triangle.solid {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px; /* 上三角形 */
  border-color: #333 transparent transparent transparent;
}

空心三角形:

/* 空心三角形的样式 */
.dropdown-header .triangle.hollow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px; /* 上三角形 */
  border-color: #fff transparent transparent transparent;
  border-left-color: #333;
  border-right-color: #333;
}

HTML结构:

<div class="dropdown-header">
  <div class="triangle solid"></div>
  <!-- 其他下拉头部内容 -->
</div>

或者空心三角形:

<div class="dropdown-header">
  <div class="triangle hollow"></div>
  <!-- 其他下拉头部内容 -->
</div>

在这个例子中，.dropdown-header 是包含下拉头部及三角形的容器，.triangle 是三角形的通用类，.solid 和 .hollow 是区分实心和空心三角形的类。您可以根据需要调整 border-width 和 border-color 的值来改变三角形的大小和颜色。