其實原理很簡單,就是befor是一個小三角 有顏色的
after是一個小三角 沒顏色的
用after去覆蓋befor即可
話不多說直接上代碼
1.這是三角在上面的
.tipbox{display:block;position: absolute;bottom: -36px;right: 0px; width: 66px;border-radius: 3px;line-height: 28px;text-align: center;font-size: 12px; color: #999; height: 28px; border: 1px solid #eee; background-color: #FFF;}.tipbox:before, .tipbox:after{ content: ""; display: block; border-width: 8px; position: absolute; bottom: 29px; left: 39px; border-style: dashed dashed dashed dashed; border-color: transparent transparent #eee transparent; font-size: 0; line-height: 0; }.tipbox:after{ bottom: 28px; border-color: transparent transparent #FFF transparent;}
2.三角在旁邊的
HTML結構同前面一樣： 1 2 3 4 5 6 < div class="tag"> < div class="arrow"> < em ></ em >< span ></ span > </ div > CSS氣泡框實現 </ div >
矩形框CSS樣式稍微改動一下： 1 .tag{ width : 300px ; height : 100px ; position : relative ; background-color : #09F ;}
重新置放一下三角箭頭： 1 .arrow{ position : absolute ; width : 70px ; height : 60px ; left : -70px ; bottom : 10px ;}
元素相鄰的兩邊border-style值設為solid（顯示），另兩邊設為transparent（不會顯示） 1 .arrow *{ display : block ; position : absolute ; border-style : dashed solid solid dashed; font-size:0; line-height:0; }
首先類比一個直角三角形，把一個元素的相鄰兩邊color設定成相同的值，另外兩邊顏色設為透明，即可得到一個直角： 1 .arrow em{ border-color : transparent #09F #09F transparent; border-width:30px 35px;}
把兩個直角三角形重疊在一起就可以得到一個不規則三角形 1 .arrow span{ border-width : 20px 35px ; border-color : transparent #FFF #FFF transparent; bottom:0;}
至此，不規則三角箭頭的氣泡框效果已經實現。
3三角在下面的
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .tag{ width:300px; height:100px; border:5px solid #09F; position:relative; background-color:#FFF; } .tag:before,.tag:after{ content:"";display:block; border-width:20px; position:absolute; bottom:-40px; left:100px; border-style:solid dashed dashed; border-color:#09F transparent transparent; font-size:0; line-height:0; } .tag:after{ bottom:-33px; border-color:#FFF transparent transparent; } </style></head><body><div class="tip-bubble">這是我的氣泡</div></body></html>
最終效果如下：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
