[分享]css做下拉三角形

CSS 是用于网页排版和样式处理的标记语言，它非常灵活，可以实现各种酷炫的效果。其中，下拉三角形就是一种非常常见的效果，一般用于指示下拉菜单或者列表等。 .dropdown { : relative;...

CSS 是用于网页排版和样式处理的标记语言，它非常灵活，可以实现各种酷炫的效果。其中，下拉三角形就是一种非常常见的效果，一般用于指示下拉菜单或者列表等。

.dropdown {
  position: relative;
  display: inline-block;
}
 
.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
}
 
.dropdown:hover .dropdown-content {
  display: block;
}
 
.dropdown:before {
  content: "";
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

上面这段 CSS 代码就可以实现一个简单的下拉三角形。其中，.dropdown 是包含下拉菜单的容器，.dropdown-content 是下拉菜单的内容，将其 display 属性设置为 none，当鼠标悬浮在 .dropdown 上时，将其 .dropdown-content 的 display 属性设置为 block 以显示下拉菜单。

在下拉菜单的右侧，我们使用了 :before 伪元素来生成一个三角形图案，它的大小可以通过 border- 属性来控制。我们将其定位到了下拉菜单容器的右侧，同时使用了 top 和 transform 属性来使其水平居中。

通过这样简单的 CSS 代码，我们就实现了一个非常常见的下拉三角形效果。