純css實現氣泡效果
阿新 • • 發佈:2018-11-11
先上程式碼:
div.bubble{ position: absolute; margin: 0; padding: 0; color: #86181d; background-color: #ffdce0; border-color: #cea0a5; display:block; border:1px solid; border-radius: 4px; padding: 2px; } div.bubble::before{ content: ' '; display: block; border-right:7px solid #ffdce0; border-left:7px solid transparent; border-top:7px solid transparent; border-bottom: 7px solid transparent; width: 0px; height: 0px; position: absolute; top:4px; left:-14px; z-index: 3; } div.bubble::after{ content: ' '; display: block; border-right:8px solid #86181d; border-left:8px solid transparent; border-top:8px solid transparent; border-bottom: 8px solid transparent; width: 0px; height: 0px; position: absolute; top:3px; left:-16.5px; z-index: 2; }
效果圖:
主要運用的是1.border 組成的直角三角形。2,before 和 after 偽元素 。3,z-index屬性
1. 將元素的長寬設定為0,並且將border的3條邊設定為透明的,就會出現border顏色的直角三角形;
2. 利用偽元素after和before,可以不用另外建立子元素,這可以避免不必要的dom複雜性
3. 用兩個border設定的三角形,一大一小,可以模擬邊框的效果