不同樣式tooltip對話框小三角的css實現(xiàn)
開發(fā)過程中已經(jīng)遇到過好多次需要手動實現(xiàn) tooltip 樣式了，這里就總結(jié)下，以便未來更好的復(fù)制粘貼。
如上圖，常見的 tooltip 總共有 3 種類型，純背景色無邊框、有邊框、包含背景圖，其中的小三角可能是純色、尖尖有弧度。
下邊介紹四種常用的方法來實現(xiàn) tooltip。
貼圖
簡單方便快捷，一個三角形的圖定下位即可。在女朋友的幫助下，用 AI 成功畫了三種三角形。
下邊我們只需要把三角形貼到矩形下邊即可。
純背景色三角形
.wxml
<view class="tooltip">
<view class="tooltip-text">我是一句提示內(nèi)容</view>
<image class="tooltip-triangle" src="https://windliangblog.oss-cn-beijing.aliyuncs.com/tooltip-01.png" />
</view>
.wxss
.tooltip {
width: 400rpx;
margin: 100rpx;
position: relative;
}
.tooltip-text {
height: 60rpx;
line-height: 60rpx;
background: #F5F8FF;
color: #494949;
border-radius: 5rpx;
padding: 0 20rpx;
}
.tooltip-triangle {
position: absolute;
width: 30rpx;
height: 30rpx;
top: 60rpx;
left: 200rpx;
}
帶邊框的三角形和三角形圓角
.wxml
<view class="tooltip">
<view class="tooltip-text">我是一句提示內(nèi)容</view>
<image class="tooltip-triangle" src="https://windliangblog.oss-cn-beijing.aliyuncs.com/tooltip-02.png" />
</view>
.wxss
.tooltip {
width: 400rpx;
margin: 100rpx;
position: relative;
}
.tooltip-text {
height: 60rpx;
line-height: 60rpx;
background: #f5f8ff;
color: #494949;
border-radius: 5rpx;
padding: 0 20rpx;
border: 2px solid #002fa7;
}
.tooltip-triangle {
position: absolute;
width: 30rpx;
height: 30rpx;
top: 62rpx;
left: 200rpx;
}
發(fā)現(xiàn)原有的
border沒有蓋住，然后從重新做了一張上邊延伸背景色的圖。
圓角的三角同理，換下
image的src即可。
利用 border
不知道是誰第一個想到的這種方案，是真的很神奇。我們經(jīng)常寫 border ，可有沒有想過它的四個角的連接處是什么樣的？
讓我們將連接處放大：
會發(fā)現(xiàn)每條邊其實是一個梯形，然后互相接起來。那么如果 border 中內(nèi)容的寬高都是 0 會怎么樣呢？
.border {
border-width: 4px;
border-color: #F00 #0F0 #00F #0FF;
border-style: solid;
width: 0px;
height: 0px;
}
三角形出現(xiàn)了！我們只需要將左邊下邊右邊的 border 顏色設(shè)置為透明就是我們要的三角形了,border-color: #F00 transparent transparent transparent;
此外，雖然底部 boder 設(shè)置為透明了，但是還占據(jù)高度，我們可以將它的 width 設(shè)為 0：border-bottom-width: 0。
然后我們只需要將之前使用的圖片替換掉即可。
.wxml
<view class="tooltip">
<view class="tooltip-text">我是一句提示內(nèi)容</view>
<view class="tooltip-triangle"></view>
</view>
.wxss
.tooltip {
max-width: 400rpx;
margin-left: 20rpx;
position: relative;
}
.tooltip-text {
padding: 15rpx;
background: #002FA7;
color: #fff;
border-radius: 5rpx;
}
.tooltip-triangle {
position: absolute;
top: 62rpx;
left: 200rpx;
border-width: 30rpx;
border-color: #002FA7 transparent transparent transparent;
border-style: solid;
width: 0px;
height: 0px;
}
效果如下：
三角形形狀的話，我們可以通過 border-width 屬性去調(diào)整高低胖瘦。
帶邊框三角
上邊的矩形和三角形都沒有邊框，如果是有邊框的，下邊這種該怎么實現(xiàn)呢？
其實很簡單，我們只需要在原有三角形的位置寫一個一樣的三角形，然后顏色設(shè)置為對話框的背景色，向上偏移一定位置即可。
把覆蓋的三角形顏色設(shè)置為紅色，這樣看起來就很明顯了，如下圖：
代碼如下：
.wxml
<view class="tooltip">
<view class="tooltip-text">我是一句提示內(nèi)容</view>
<view class="tooltip-triangle-top"></view>
<view class="tooltip-triangle"></view>
</view>
.wxss
.tooltip {
max-width: 400rpx;
margin-left: 20rpx;
position: relative;
}
.tooltip-text {
padding: 15rpx;
background: #fff;
border-radius: 5rpx;
border: 5rpx solid #002FA7;
}
.tooltip-triangle-top {
position: absolute;
top: 71rpx;
left: 200rpx;
border-width: 30rpx;
border-left-width: 20rpx;
border-right-width: 20rpx;
border-color: #FFF transparent transparent transparent;
border-style: solid;
width: 0px;
height: 0px;
z-index: 10;
}
.tooltip-triangle {
position: absolute;
top: 76rpx;
left: 200rpx;
border-width: 30rpx;
border-left-width: 20rpx;
border-right-width: 20rpx;
border-color: #002FA7 transparent transparent transparent;
border-style: solid;
width: 0px;
height: 0px;
}
矩形旋轉(zhuǎn)
只需要兩個同樣位置的矩形，然后旋轉(zhuǎn)上邊的矩形即可。旋轉(zhuǎn)過來的三角形的長邊就是原來矩形的長，三角形邊長比是1 比 1 比根號 2。所以原有矩形的長寬比應(yīng)該為根號 2 比 1。即，width = 1.41 * height 。
代碼的話，我們用偽元素矩形旋轉(zhuǎn)，另一個矩形設(shè)置 overflow:hidden 即可。
.wxml
<view class="tooltip">
<view class="tooltip-text">我是一句提示內(nèi)容</view>
<view class="tooltip-triangle"></view>
</view>
.wxss
.tooltip {
max-width: 400rpx;
position: relative;
}
.tooltip-text {
padding: 15rpx;
background: #002FA7;
border-radius: 5rpx;
color: #FFF;
}
.tooltip-triangle {
position: relative;
left: 150rpx;
width: calc(30rpx * 1.41);
height: 30rpx;
overflow: hidden;
}
.tooltip-triangle::before {
content: '';
width: 100%;
height: 100%;
background: #002FA7;
display: block;
transform: rotate(-45deg);
transform-origin: left top;
}
由于我們?nèi)切问怯删匦紊傻?，所以帶邊框?tooltip 相對 border 的方法就容易多了。
我們只需要給偽元素設(shè)置邊框即可。
.wxss
.tooltip {
max-width: 400rpx;
position: relative;
}
.tooltip-text {
padding: 15rpx;
background: #f5f8ff;
color: #494949;
border-radius: 5rpx;
border: 4rpx solid #002fa7;
}
.tooltip-triangle {
position: relative;
left: 150rpx;
width: calc(30rpx * 1.41);
height: 30rpx;
overflow: hidden;
}
.tooltip-triangle::before {
content: '';
border: 4rpx solid #002fa7;
background: #f5f8ff;
width: 100%;
height: 100%;
display: block;
transform: rotate(-45deg);
transform-origin: left top;
box-sizing: border-box;
border-radius: 8rpx;
}
此時出現(xiàn)了一個問題，上邊矩形的 border 露了出來。
這里用一個 trick 的方法，我們在原有矩形上邊加一個 border 蓋住上邊矩形的邊框。
.wxss 添加下邊的屬性
.tooltip-triangle {
border-top: 4rpx solid #f5f8ff;
bottom: 8rpx;
}
此外，帶弧角的三角形，我們也只需要在偽元素矩形上設(shè)置圓角即可。
.wxss 添加下邊的屬性
.tooltip-triangle::before
border-radius: 8rpx;
}
clip-path
下邊這種 tooltip 類型，小三角延伸了背景圖片(背景圖片 url 可能不是固定的），上邊幾種方法都是無能為力的。
此時就需要 clip-path 屬性了，我們可以在 clippy 快速生成我們需要的多邊形路徑。
https://bennettfeely.com/clippy/
polygon 就是畫多邊形，然后給定各個點的坐標(biāo)即可，代碼中各個顏色和圖片中的各個點是對應(yīng)的。
然后我們把上邊的代碼復(fù)制過來即可。
.wxml
<view class="tooltip">
<image src="https://windliangblog.oss-cn-beijing.aliyuncs.com/meituan4.jpg" class="tooltip-text"></image>
</view>
.wxss
.tooltip {
max-width: 400rpx;
position: relative;
}
.tooltip-text {
width: 400rpx;
height: 200rpx;
overflow: hidden;
clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 70% 80%, 63% 100%, 55% 80%, 1% 80%);
}
使用 clip-path 的話 border 和圓角就比較難搞了，因為最下邊的邊其實是被截掉了。
在 Web 頁面中可以使用 SVG 來實現(xiàn)想要的效果，可以 參考這里 的一個回答。
https://stackoverflow.com/questions/31854185/how-to-add-border-in-my-clip-path-polygon-css-style
但在小程序中我沒想到好方法，歡迎大家和我交流。
總
上邊主要介紹了貼圖、border、矩形旋轉(zhuǎn)、clip-path四種方法。日常開發(fā)中，border 方案基本滿足需要了，偷懶的話也可以直接找設(shè)計要圖。大家還用過其他方法嗎？