如何使用 Tailwind CSS 向元素添加箭头？

【问题标题】：How to add arrows to elements with Tailwind CSS?如何使用 Tailwind CSS 向元素添加箭头？
【发布时间】：2021-11-21 11:53:35
【问题描述】：

我有一个导航栏，其中包含一个搜索字段和一个社交网络下拉菜单，如果它们处于活动状态，它们都会显示在导航栏下方。我在其他网站上看到了小“箭头”，它们将第二行元素与第一个元素在视觉上连接起来，如下所示：

我怎样才能达到同样的效果并始终确保箭头也指向正确的父元素（视觉上）？这是我的导航栏（不知何故 JavaScript 不起作用）：https://play.tailwindcss.com/qksxyrh24P

【问题讨论】：

【解决方案1】：

1>>创建一个高度和宽度相同的 div 并将其旋转 45 度。

2>>使它的位置绝对 z 索引为 2 并且颜色与您的下拉字段相同

3>> 确保在搜索字段和下拉字段之间添加一些空格

4>> 使用左上角的属性来适当地放置它

5>> 然后只需添加您用来显示或隐藏下拉列表的显示类link

【讨论】：