[轉]css實現不同樣式的tooltip對話框小三角

不同樣式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 方案基本滿足需要了，偷懶的話也可以直接找設計要圖。大家還用過其他方法嗎？