CSS 在我的下拉菜单上方放置一个带有边框的箭头 / 三角形

在本文中，我们将介绍如何使用CSS将一个带有边框的箭头或三角形放置在下拉菜单的顶部。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

1. 使用伪元素创建箭头/三角形

首先，我们可以使用CSS的伪元素(::before 或 ::after)来创建一个箭头或三角形。我们可以使用border属性来控制三角的形状和大小，以及旋转和平移来使其放置在正确的位置。

例如，下面的CSS代码将创建一个位于下拉菜单上方的箭头：

.dropdown-menu::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid black;
}

在上面的代码中，我们使用绝对定位(position: absolute)将箭头放置在下拉菜单的上方。通过设置top属性为负值，我们将箭头移动到菜单的顶部。借助transform属性的translateX函数，我们可以确保箭头在水平方向上位于菜单的中心位置。

箭头的形状由三个边框决定，其中两个边框(border-left 和 border-right)是透明的，以便形成一个倒三角形。最后一个边框(border-bottom)设置为实心，可以决定箭头的颜色。你可以根据需要调整边框的大小和颜色。

2. 设置箭头的位置

在上面的示例中，我们使用了left属性来水平居中箭头，但是如果你想将箭头放置在菜单的右侧或左侧，你可以通过调整left属性的值来实现。

例如，下面的CSS代码将把箭头放置在右上角：

.dropdown-menu::before {
  content: "";
  position: absolute;
  top: -10px;
  right: 0;
  transform: translateY(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid black;
}

在上面的代码中，我们设置了right属性为0，将箭头放在了菜单的右上角。通过调整transform属性的translateY函数，我们使箭头在垂直方向上位于菜单的中心位置。

同样地，你也可以设置left属性为0将箭头放置在菜单的左上角。

3. 调整箭头的大小和颜色

如果你想要调整箭头的大小，你可以在设置边框(border)时更改边框的宽度值。

例如，下面的CSS代码将使箭头的大小变得更大：

.dropdown-menu::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid black;
}

在上面的代码中，我们将箭头的宽度值设置为20像素，使其变得更大。你可以根据需要调整箭头的大小。

如果你想改变箭头的颜色，你可以将border-bottom的颜色属性修改为你想要的颜色。

4. 结合下拉菜单

下面是一个将箭头和下拉菜单组合使用的示例：

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
    Dropdown Menu
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Item 1</a>
    <a class="dropdown-item" href="#">Item 2</a>
    <a class="dropdown-item" href="#">Item 3</a>
  </div>
</div>

.dropdown-menu::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid black;
}

.dropdown-menu {
  display: none;
  position: absolute;
  background-color: white;
  padding: 10px;
  border: 1px solid black;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

在上面的示例中，我们将箭头应用于一个下拉菜单，并使用CSS设置了下拉菜单的样式。当鼠标悬停在下拉菜单上时，通过:hover伪类选择器来将下拉菜单设置为显示状态。