css 实现下拉三角形

CSS 实现下拉三角形可以通过 :after 伪元素来完成。首先，我们需要在 CSS 中定义一个具有相同宽度和高度的元素作为容器，并设置其 position: relative;

.container {
  position: relative;
  width: 200px;
  height: 30px;
}

css 实现下拉三角形

下一步，我们添加一个 :after 伪元素，并设置其宽度、高度、位置和背景颜色

.container:after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #000;
}

上述代码中，我们将 :after 伪元素定位到容器的右上角，设置其宽度和高度为 0，并使用 CSS 三角形技巧定义三角形的样式。

最后，我们需要改变 :hover 状态下伪元素的颜色，使其看起来像是被点击或激活：

.container:hover:after {
  border-top-color: red;
}

上述代码中，我们将伪元素的上边框颜色设为红色，以模拟被点击或激活的效果。

css 实现下拉三角形

相关文章