css三角向下箭头

CSS三角向下箭头是一种常用的UI元素，它通常用于表示下拉菜单、下拉列表和折叠面板等应用场景。

.arrow-down {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #000;
} 

上面的CSS代码是实现一个常见的三角向下箭头的样式。其中，通过设置三个边框的宽度和颜色，加上左右边框的 transparent（透明）属性，来实现一个类似箭头的形状。

除了上面的代码外，我们还可以使用伪元素::before和::after来实现更复杂的样式，例如向下箭头旁边带有小三角形的样式。

.arrow-down:before {
  content: "";
  display: block;
  position: absolute;
  top: -6px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #000;
}

.arrow-down:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -6px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-right: 6px solid #000;
  border-bottom: 6px solid transparent;
} 

上面的CSS代码就是一个带有小三角形的向下箭头，它使用了::before和::after伪元素来实现。

需要注意的是，CSS三角向下箭头的样式可以根据具体的应用场景进行调整，例如可以调整大小、颜色、边框粗细等属性，以满足需求。