标签：对话框 tooltip height width position border 小三角 left

不同样式tooltip对话框小三角的css实现

版权 祈澈菇凉于 2021-08-19 09:44:51 发布 

这篇文章总结的非常好全面，转帖于此，感谢原文作者。

开发过程中已经遇到过好多次需要手动实现 tooltip 样式了，这里就总结下，以便未来更好的复制粘贴。

如上图，常见的 tooltip 总共有 3 种类型，纯背景色无边框、有边框、包含背景图，其中的小三角可能是纯色、尖尖有弧度。

下边介绍四种常用的方法来实现 tooltip。

贴图

简单方便快捷，一个三角形的图定下位即可。在女朋友的帮助下，用 AI 成功画了三种三角形。

下边我们只需要把三角形贴到矩形下边即可。

• 纯背景色三角形

  1.   .wxml
  2.   <view class="tooltip">
  3.         <view class="tooltip-text">我是一句提示内容</view>
  4.         <image class="tooltip-triangle" src="https://windliangblog.oss-cn-beijing.aliyuncs.com/tooltip-01.png" />
  5.   </view>
  6.    
  7.   .wxss
  8.   .tooltip {
  9.     width: 400rpx;
  10.     margin: 100rpx;
  11.     position: relative;
  12.   }
  13.    
  14.   .tooltip-text {
  15.     height: 60rpx;
  16.     line-height: 60rpx;
  17.     background: #F5F8FF;
  18.     color: #494949;
  19.     border-radius: 5rpx;
  20.     padding: 0 20rpx;
  21.   }
  22.    
  23.   .tooltip-triangle {
  24.     position: absolute;
  25.     width: 30rpx;
  26.     height: 30rpx;
  27.     top: 60rpx;
  28.     left: 200rpx;
  29.   }
  

• 带边框的三角形和三角形圆角

  1.   .wxml
  2.   <view class="tooltip">
  3.         <view class="tooltip-text">我是一句提示内容</view>
  4.         <image class="tooltip-triangle" src="https://windliangblog.oss-cn-beijing.aliyuncs.com/tooltip-02.png" />
  5.   </view>
  6.    
  7.   .wxss
  8.   .tooltip {
  9.   width: 400rpx;
  10.   margin: 100rpx;
  11.   position: relative;
  12.   }
  13.    
  14.   .tooltip-text {
  15.   height: 60rpx;
  16.   line-height: 60rpx;
  17.   background: #f5f8ff;
  18.   color: #494949;
  19.   border-radius: 5rpx;
  20.   padding: 0 20rpx;
  21.   border: 2px solid #002fa7;
  22.   }
  23.    
  24.   .tooltip-triangle {
  25.   position: absolute;
  26.   width: 30rpx;
  27.   height: 30rpx;
  28.   top: 62rpx;
  29.   left: 200rpx;
  30.   }
  

  发现原有的 border 没有盖住，然后从重新做了一张上边延伸背景色的图。

  

  圆角的三角同理，换下 image 的 src 即可。

  

利用 border

不知道是谁第一个想到的这种方案，是真的很神奇。我们经常写 border ，可有没有想过它的四个角的连接处是什么样的？

让我们将连接处放大：

会发现每条边其实是一个梯形，然后互相接起来。那么如果 border 中内容的宽高都是 0 会怎么样呢？

1.   .border {
2.     border-width: 4px;
3.     border-color: #F00 #0F0 #00F #0FF;
4.     border-style: solid;
5.     width: 0px; 
6.     height: 0px;
7.   }

三角形出现了！我们只需要将左边下边右边的 border 颜色设置为透明就是我们要的三角形了,border-color: #F00 transparent transparent transparent;

此外，虽然底部 boder 设置为透明了，但是还占据高度，我们可以将它的 width 设为 0：border-bottom-width: 0。

然后我们只需要将之前使用的图片替换掉即可。

1.   .wxml
2.   <view class="tooltip">
3.           <view class="tooltip-text">我是一句提示内容</view>
4.           <view class="tooltip-triangle"></view>
5.   </view>
6.    
7.   .wxss
8.   .tooltip {
9.       max-width: 400rpx;
10.       margin-left: 20rpx;
11.       position: relative;
12.   }
13.   .tooltip-text {
14.       padding: 15rpx;
15.       background: #002FA7;
16.       color: #fff;
17.       border-radius: 5rpx;
18.   }
19.    
20.   .tooltip-triangle {
21.       position: absolute;
22.       top: 62rpx;
23.       left: 200rpx;
24.       border-width: 30rpx;
25.       border-color: #002FA7 transparent transparent transparent;
26.       border-style: solid;
27.       width: 0px;
28.       height: 0px;
29.   }

效果如下：

三角形形状的话，我们可以通过 border-width 属性去调整高低胖瘦。

• 带边框三角

上边的矩形和三角形都没有边框，如果是有边框的，下边这种该怎么实现呢？

其实很简单，我们只需要在原有三角形的位置写一个一样的三角形，然后颜色设置为对话框的背景色，向上偏移一定位置即可。

把覆盖的三角形颜色设置为红色，这样看起来就很明显了，如下图：

代码如下：

1.   .wxml
2.   <view class="tooltip">
3.           <view class="tooltip-text">我是一句提示内容</view>
4.           <view class="tooltip-triangle-top"></view>
5.           <view class="tooltip-triangle"></view>
6.   </view>
7.    
8.   .wxss
9.   .tooltip {
10.       max-width: 400rpx;
11.       margin-left: 20rpx;
12.       position: relative;
13.   }
14.    
15.   .tooltip-text {
16.       padding: 15rpx;
17.       background: #fff;
18.       border-radius: 5rpx;
19.       border: 5rpx solid #002FA7;
20.   }
21.    
22.   .tooltip-triangle-top {
23.       position: absolute;
24.       top: 71rpx;
25.       left: 200rpx;
26.       border-width: 30rpx;
27.       border-left-width: 20rpx;
28.       border-right-width: 20rpx;
29.       border-color: #FFF transparent transparent transparent;
30.       border-style: solid;
31.       width: 0px;
32.       height: 0px;
33.       z-index: 10;
34.   }
35.    
36.   .tooltip-triangle {
37.       position: absolute;
38.       top: 76rpx;
39.       left: 200rpx;
40.       border-width: 30rpx;
41.       border-left-width: 20rpx;
42.       border-right-width: 20rpx;
43.       border-color: #002FA7 transparent transparent transparent;
44.       border-style: solid;
45.       width: 0px;
46.       height: 0px;
47.   }

矩形旋转

只需要两个同样位置的矩形，然后旋转上边的矩形即可。旋转过来的三角形的长边就是原来矩形的长，三角形边长比是1 比 1 比根号 2。所以原有矩形的长宽比应该为根号 2 比 1。即，width = 1.41 * height 。

代码的话，我们用伪元素矩形旋转，另一个矩形设置 overflow:hidden 即可。

1.   .wxml
2.   <view class="tooltip">
3.           <view class="tooltip-text">我是一句提示内容</view>
4.           <view class="tooltip-triangle"></view>
5.   </view>
6.    
7.   .wxss
8.   .tooltip {
9.       max-width: 400rpx;
10.       position: relative;
11.   }
12.    
13.   .tooltip-text {
14.       padding: 15rpx;
15.       background: #002FA7;
16.       border-radius: 5rpx;
17.       color: #FFF;
18.   }
19.    
20.    
21.   .tooltip-triangle {
22.       position: relative;
23.       left: 150rpx;
24.       width: calc(30rpx * 1.41);
25.       height: 30rpx;
26.       overflow: hidden;
27.   }
28.    
29.    
30.   .tooltip-triangle::before {
31.       content: '';
32.       width: 100%;
33.       height: 100%;
34.       background: #002FA7;
35.       display: block;
36.       transform: rotate(-45deg);
37.       transform-origin: left top;
38.   }

由于我们三角形是由矩形生成的，所以带边框的 tooltip  相对 border 的方法就容易多了。

我们只需要给伪元素设置边框即可。

1.   .wxss
2.   .tooltip {
3.       max-width: 400rpx;
4.       position: relative;
5.   }
6.    
7.   .tooltip-text {
8.       padding: 15rpx;
9.       background: #f5f8ff;
10.       color: #494949;
11.       border-radius: 5rpx;
12.       border: 4rpx solid #002fa7;
13.   }
14.    
15.    
16.   .tooltip-triangle {
17.       position: relative;
18.       left: 150rpx;
19.       width: calc(30rpx * 1.41);
20.       height: 30rpx;
21.       overflow: hidden;
22.   }
23.    
24.    
25.   .tooltip-triangle::before {
26.       content: '';
27.       border: 4rpx solid #002fa7;
28.       background: #f5f8ff;
29.       width: 100%;
30.       height: 100%;
31.       display: block;
32.       transform: rotate(-45deg);
33.       transform-origin: left top;
34.       box-sizing: border-box;
35.       border-radius: 8rpx;
36.   }

此时出现了一个问题，上边矩形的 border 露了出来。

这里用一个 trick 的方法，我们在原有矩形上边加一个 border 盖住上边矩形的边框。

1.   .wxss 添加下边的属性
2.   .tooltip-triangle {
3.       border-top: 4rpx solid #f5f8ff;
4.       bottom: 8rpx;
5.   }

此外，带弧角的三角形，我们也只需要在伪元素矩形上设置圆角即可。

1.   .wxss 添加下边的属性
2.   .tooltip-triangle::before 
3.       border-radius: 8rpx;
4.   }

clip-path

下边这种 tooltip 类型，小三角延伸了背景图片(背景图片 url 可能不是固定的），上边几种方法都是无能为力的。

此时就需要 clip-path 属性了，我们可以在 clippy 快速生成我们需要的多边形路径。

https://bennettfeely.com/clippy/

polygon 就是画多边形，然后给定各个点的坐标即可，代码中各个颜色和图片中的各个点是对应的。

然后我们把上边的代码复制过来即可。

1.   .wxml
2.   <view class="tooltip">
3.           <image src="https://windliangblog.oss-cn-beijing.aliyuncs.com/meituan4.jpg" class="tooltip-text"></image>
4.   </view>
5.    
6.   .wxss
7.   .tooltip {
8.       max-width: 400rpx;
9.       position: relative;
10.   }
11.    
12.   .tooltip-text {
13.       width: 400rpx;
14.       height: 200rpx;
15.       overflow: hidden;
16.       clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 70% 80%, 63% 100%, 55% 80%, 1% 80%);
17.   }

使用 clip-path 的话 border 和圆角就比较难搞了，因为最下边的边其实是被截掉了。

在 Web 页面中可以使用 SVG 来实现想要的效果，可以 参考这里 的一个回答。

https://stackoverflow.com/questions/31854185/how-to-add-border-in-my-clip-path-polygon-css-style

但在小程序中我没想到好方法，欢迎大家和我交流。

总

上边主要介绍了贴图、border、矩形旋转、clip-path四种方法。日常开发中，border 方案基本满足需要了，偷懒的话也可以直接找设计要图。大家还用过其他方法吗？

标签：对话框,tooltip,height,width,position,border,小三角,left
From： https://www.cnblogs.com/dajianshi/p/16657004.html