[分享]css只做下拉小箭头

CSS 下拉小箭头非常常用且实用的效果，下面就来介绍怎样实现这个效果。

.dropdown {
  position: relative;
}
.dropdown:after {
  content: "";
  display: inline-block;
  border-style: solid;
  border-width: 0px 2px 2px 0px; /* 通过改变border-width实现小箭头的大小 */
  transform: rotate(45deg); /* 旋转45度 */
  vertical-align: middle;
  margin-left: 5px;
  width: 5px;
  height: 5px;
} 

首先，为了实现下拉小箭头的效果，需要设置一个容器元素，并在这个容器元素的 :after 伪元素上加上箭头。

在 :after 伪元素中，通过设置 content 为空字符串，使得这个元素不具有内容，而为了让它正常显示，需要设置 display 为 inline-block。为了形成小箭头，需要设置 border-style为 solid， 再通过设置 border-width 达到目标效果。

最后，通过设置 transform: rotate(45deg) 旋转45度，完美形成一个小箭头效果。

整个下拉小箭头的效果就实现了，通过修改 border-width 和边框颜色，可以自由地调整箭头的大小和颜色，提高整体设计的美观度。