使用Tailwind CSS制作带圆角箭头Tooltip的边框实现问题

要实现箭头与Tooltip衔接处也带圆角的效果，别用传统的边框三角形方法——这种方式只能做箭头尖端的圆角，没法处理衔接部分。换个思路，用旋转的圆角正方形伪元素来做箭头，就能完美实现衔接处的圆角：

完整代码示例 #

<div class="relative inline-block">
  <!-- 触发按钮 -->
  <button class="px-4 py-2 bg-blue-500 text-white rounded-md">Hover me</button>
  
  <!-- Tooltip内容 -->
  <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 bg-white rounded-lg shadow-lg text-gray-700 whitespace-nowrap">
    带圆角箭头的Tooltip
    <!-- 圆角箭头 -->
    <div class="absolute top-full left-1/2 transform -translate-x-1/2 rotate-45 w-4 h-4 bg-white rounded-sm"></div>
  </div>
</div>

关键逻辑说明 #

• Tooltip容器：用relative让内部绝对定位的元素有参照基准
• Tooltip主体：rounded-lg设置整体圆角，bottom-full和-translate-x-1/2实现相对于触发按钮的居中定位
• 圆角箭头：
  1. 用一个w-4 h-4的正方形元素，rotate-45旋转45度变成菱形
  2. rounded-sm给正方形加圆角，旋转后菱形的四个角都会带圆角
  3. 通过absolute top-full left-1/2 -translate-x-1/2定位在Tooltip底部居中，让菱形的上半部分和Tooltip的圆角底部重叠，自然形成衔接处的圆角效果

自定义调整 #

• 要改箭头大小：调整w-4 h-4的数值，比如w-3 h-3做小箭头
• 要改圆角程度：把rounded-sm换成rounded或rounded-md，同时Tooltip的rounded-lg也可以对应调整，保持风格统一

内容的提问来源于stack exchange，提问作者Vlad Dutan