在網(wǎng)站建設(shè)過程中工具提示是CSS中使用多年的一種非常常見的模式。在CSS中有很多方法可以實現(xiàn)工具提示，盡管有些方法需要的神奇數(shù)字讓人頭疼。今天深圳尼高網(wǎng)站建設(shè)公司和大家分享一下CSS工具提示。

在此之前我們探索了色帶形狀以及使用CSS漸變和clip-path()。這一次，我想探索另一種形狀，一種您可能在前端生活中至少遇到過一次的形狀:工具提示。你知道我們在說什么，那些看起來像漫畫書里的演講泡泡的小東西。它們在野外隨處可見，從按鈕的懸停效果到你手機上的短信應(yīng)用程序。

大家感覺CSS中的形狀看起來很容易制作，但它總是以大量的斗爭結(jié)束。例如，如何調(diào)整尾部的位置來指示工具提示是來自左側(cè)、右側(cè)還是中間位置？有需要考慮的因素很多制作工具提示時—包括溢出量, 沖突檢出，以及語義學(xué)——但我想關(guān)注的是尾巴的形狀和方向，因為我經(jīng)常看到用于定位它們的不靈活的固定單元。

忘記您已經(jīng)知道的關(guān)于工具提示的知識，因為在本文中，我們將從零開始，您將學(xué)習(xí)如何使用現(xiàn)代CSS支持的最少標記來構(gòu)建工具提示，該工具提示提供了通過調(diào)整CSS變量來配置組件的靈活性。我們不會構(gòu)建一兩個形狀，但是…100種不同的形狀！

這聽起來像是我們正在進入一篇超長的文章，但實際上，我們可以通過調(diào)整一些值輕松實現(xiàn)這一目標。最終，您將擁有一個裝滿CSS技巧的后口袋，這些技巧可以組合起來創(chuàng)建任何您想要的形狀。