理解使用before，after偽類實現小三角形氣泡框
先來理解before和after偽類的用法吧，before從字面上的意思可以理解為前面的意思，它一般和content屬性一起使用，把內容插入在其他元素的前面，同理after的含義就是把內容插入到其他元素的後面了。先來看一個簡單的demo，如下程式碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css" id="colorFlipFlop"> * {margin:0; padding: 0;} div { width: 200px; height: 100px; border: 1px solid red; } .after:after { content: '我是在後面的'; color: blue; } .before:before { content: '我是在前面的'; color: red; } </style> </head> <body> <div class="after"> 我是after內容 </div> <div class="before"> 我是before內容 </div> </body> </html>
效果如下：
簡單理解完 before 和 after後，我們來看看如何使用 before 和 after來製作小三角形吧。
1. 首先我們來看看 css border屬性，當我們把div中的border-color 設定成不同的顏色後，程式碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css" id="colorFlipFlop"> * {margin:0; padding: 0;} .demo { width: 50px; height: 50px; border-width: 20px; border-style: solid; border-color: #CCC #00F #933 #0C9; margin: 100px; } </style> </head> <body> <div class="demo"></div> </body> </html>
效果如下圖：
如果我們現在把div的寬度和高度設定為0的話，那麼四邊就會變成三角形了，如下程式碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css" id="colorFlipFlop"> * {margin:0; padding: 0;} .demo { width: 0px; height: 0px; border-width: 20px; border-style: solid; border-color: #CCC #00F #933 #0C9; margin: 100px; } </style> </head> <body> <div class="demo"></div> </body> </html>
效果變為如下：
應該可以理解掉吧，如上把寬度和高度設定為0的話，中間那個寬50px和高50px變為0，中間那塊就沒有了。
現在我們需要一個三角形，那麼我們現在只需要把其他三邊的顏色設定為透明就可以了，將其他三邊顏色設定為透明，即color的值為transparent. 如下程式碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css" id="colorFlipFlop"> * {margin:0; padding: 0;} .demo { width: 0px; height: 0px; border-width: 20px; border-style: solid; border-color: transparent transparent #933 transparent; margin: 100px; } </style> </head> <body> <div class="demo"></div> </body> </html>
然後效果如下：
現在小三角形可以實現了，當然如果需要不同的方向的三角形可以設定對應不同的 border-color 位置對應的透明。
我們現在需要實現的是使用before和after這樣的偽類來實現氣泡框類似的效果。先看下一個簡單的demo，如下：
<div class="demo"></div> <style> * {margin:0; padding: 0;} .demo { width: 100px; height: 100px; position: relative; border: 1px solid #09f; margin: 100px; } </style>
效果如下：
然後需要把小三角形定位上去即可。利用上面的介紹實現的小三角形的效果放在該元素的偽類上來。
我們需要在該div元素後面加一個小三角形，需要使用到偽類after，然後把偽類上的小三角定位上去即可，如下程式碼所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css" id="colorFlipFlop"> * {margin:0; padding: 0;} .demo { width: 100px; height: 100px; position: relative; border: 1px solid #09f; margin: 100px; } .demo:after { width: 0px; height: 0px; border-width: 12px; border-style: solid; border-color: transparent transparent #933 transparent; position: absolute; content: ' '; left: 39px; top: -24px; } </style> </head> <body> <div class="demo"></div> </body> </html>
如上程式碼，我們使用了偽元素after，把小三角定位上去，實現的效果變成如下了：
空心三角
現在效果基本實現了氣泡框的效果，但是呢上面的小三角是實心的，在很多應用場景中，小三角形是空心的，我們現在需要使用到另外一個偽類元素before。
空心三角的設計思路其實和實心的三角類似，使用的是before偽類，也是把小三角定位上去，但是before偽類設定的小三角可能沒有after設定小三角寬度大而已，並且before實現的小三角設定顏色為白色的實心三角，然後兩個小三角實現重疊一下，這樣的話，從視覺上看到的貌似是空心的三角了。如下程式碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css" id="colorFlipFlop"> * {margin:0; padding: 0;} .demo { width: 100px; height: 100px; position: relative; border: 1px solid #09f; margin: 100px; } .demo:after, .demo:before { width: 0px; height: 0px; border-width: 12px; border-style: solid; border-color: transparent transparent #fff transparent; position: absolute; content: ' '; left: 39px; top: -24px; } .demo:before { top: -25px; border-color: transparent transparent #09f transparent; } </style> </head> <body> <div class="demo"></div> </body> </html>
如下圖所示：
