本文是作者從別的網站和文章學習了解的知識，簡單做了個筆記，想要學習更多的可以參考這里：【css進階】偽元素的妙用--單標簽之美，奇思妙想
一、三角形的實現
首先，先畫了三角形，后面二、三都是根據這個 衍生而來的。
第一步，Css，很簡單border就可以實現了，下面就是一個三角形的css
1 article{ float:left; margin-left:80px; } 2 .Triangle{ 3 width:0px; 4 border:100px solid transparent; 5 border-top-color:#00aabb; 6 }
第二步，Html
然后想要實現左三角，在三角形的css基礎上，加一個 border-right:0；
右三角，加一個 border-left:0；
1 <article> 2 <h3>一、三角形</h3> 3 <div class="Triangle"></div> 4 </article> 5 <article> 6 <h5>二、左三角形</h5> 7 <div class="Triangle" style="border-right:0;"></div> 8 </article> 9 <article> 10 <h5>三、右三角形</h5> 11 <div class="Triangle" style="border-left:0;"></div> 12 </article>
最后，有什么用呢，可以做對話框或氣泡框一類的東西啦！比如說：
同樣道理，其實就是一個帶圓角的矩形與三角形拼接而成的罷了，所以只用寫好第一個三角氣泡，后面就是根據他衍生出來的而已
第一步，Css
先建立一個帶圓角的矩形，這個就不用教了，有點基礎的都會
后面就是利用為元素:after來為圓角矩形添加小三角了，然后小三角根據圓角矩形去定位就OK了，
1 /*氣泡矩形*/ 2 .ract{ 3 position:position; 4 width:260px; 5 height:120px; 6 background-color:#0094ff; 7 border-radius:10px; 8 } 9 10 /*三角氣泡*/ 11 .TrBubble:after{ 12 content:""; 13 position:absolute; 14 bottom:0; 15 left:50%; 16 border:34px solid transparent; 17 border-top-color:#0094ff; 18 border-bottom:0; 19 margin:0 0 -34px -34px; 20 } 21 22 /*左三角氣泡*/ 23 .LeftBubble:after{ 24 content:""; 25 position:absolute; 26 bottom:0; 27 left:50%; 28 border:34px solid transparent; 29 border-top-color:#0094ff; 30 border-bottom:0; 31 margin:0 0 -34px -34px; 32 border-left:0; 33 } 34 35 /*右三角氣泡*/ 36 .RightBubble:after{ 37 content:""; 38 position:absolute; 39 bottom:0; 40 left:50%; 41 border:34px solid transparent; 42 border-top-color:#0094ff; 43 border-bottom:0; 44 margin:0 0 -34px -34px; 45 border-right:0; 46 }
第二步，Html
1 <article> 2 <section> 3 <h3>一、三角氣泡</h3> 4 <div class="ract TrBubble"></div> 5 </section> 6 <section> 7 <h5>二、左三角氣泡</h5> 8 <div class="ract LeftBubble"></div> 9 </section> 10 <section> 11 <h5>三、右三角氣泡</h5> 12 <div class="ract RightBubble"></div> 13 </section> 14 </article>