給定的html代碼是： <div class='square'></div>
平常實現我們常是通過添加小的icon來實現，不僅需要添加圖片資源，還需要改動html結構。
CSS偽元素
css中偽元素有四個，分別是:first-line,:first-letter,:before,:after。其中前兩個分別選擇的是目標元素內第一行文本和第一個字母，可以為其添加多余樣式。
而最常用的就是:before和:after，這兩個偽元素與前兩個的用法不同，而用處也更大。
:before,:after分別用於向當前元素前和后添加指定的content內容，具體事例用法如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS輸出各種圖形</title> <style type="text/css"> p:before{ content:"開始"; color:#F00; font-size:12px; } p:after{ content:"結束"; color:#003; font-size:30px; border:1px solid #000; width:100px; } </style> </head> <body> <p>偽元素 測試</p> </body> </html>
上面代碼的運行結果如圖： 
可以認為:before和:after兩個偽元素是添加到當前p標簽前后的兩個元素，但是應該也會發現在p:after中寫的width:100px;並沒有奏效，這就說明了偽元素的顯示是inline的，而不是block。
至於偽元素有幾個需要注意的地方：
1.偽元素在元素內部的顯示為inline，因此想要用偽元素實現更多效果，比如上面的題目，就必須把偽元素當做block元素來用。
2.偽元素列表屬性中content必不可少，即使內容為空，content也不能為空，否則會不顯示。
3.偽元素content除了可以設置為文字之外，還可以設置為圖片，例如p:before{content:url(icon.gif);}
4.偽元素目前已經得到IE8及以上瀏覽器，可以放心使用。
用CSS做出來一個三角形或者別的形狀
掌握了偽元素之后，就可以實現上面的題目了。很明顯，是通過偽元素做出了一個三角形。怎么做呢？
用CSS代碼實現三角形很簡單，嘗試一下就可以寫出來：
，html代碼為<div class="triangle"></div>, css代碼如下
.trangle{width:0;height:0;border:40px solid; border-color:transparent transparent transparent #F00;}
別的形狀也是大同小異，通過設置不同的border-radius和border-width來實現，但是兼容性有問題，IE9及以上才會正常（自然是border-radius的問題）。
但是可以看出來元素已經是用border勾勒出來的了，但是題目中的三角形是帶有黑色邊框的，很明顯不能通過一個偽元素來搞定，那就兩個一起。
通過設定偽元素的position:absolute和z-index屬性，構成偽元素的疊加，底層是黑色，上層是白色即可。
原題目的CSS具體實現代碼如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS輸出各種圖形</title> <style type="text/css"> .square{width:100px;height:100px;background-color:#FFF;position:relative;border:2px #000000 solid;} .square:before{ content:""; width:0px; height:0px; display:block; position:absolute; z-index:2; top:25%; right:-28px; border:15px solid #FFF; border-color:transparent transparent transparent #FFF; } .square:after{content:""; width:0px; height:0px; display:block; position:absolute; z-index:1; top:25%; right:-30px; border:15px solid #FFF; border-color:transparent transparent transparent #000; } </style> </head> <body> <div class='square'></div> </body> </html>