css實現下圖樣式，具體像素值記不住了，很好設置，html code (2014百度秋招面試題)：
<div id="demo"></div>
分析：這個樣式的關鍵就在三角形和三角形實現了之后的變成只有個邊框的三角形。利用元素的：after和：before偽元素(請自動忽略低版本IE)。
思想：先實現個正方形，在實現個三角形層，放在右上角，然后再實現一個透明的三角形覆蓋黑色三角形的內部，只留邊框。
1 <!DOCTYPE html>
2 <html lang="zh">
3 <head>
4 <meta charset=utf-8>
5 <title>demo</title>
6 </head>
7
8 <style>
9 #demo{
10 width:100px; 11 height:100px; 12 border:2px solid #000; 13 } 14 #demo:before{ 15 content:''; 16 display:block; 17 width:0; 18 height:0; 19 position:relative; 20 top:10px; 21 left:100px; 22 border-left:9px solid #000; 23 border-top:7px solid transparent; 24 border-bottom:7px solid transparent; 25 } 26 #demo:after{ 27 content:''; 28 display:block; 29 width:0; 30 height:0; 31 position:relative; 32 top:-2px; 33 left:100px; 34 border-left:7px solid #fff; 35 border-top:5px solid transparent; 36 border-bottom:5px solid transparent; 37 } 38 39 </style> 40 <body> 41 <div id='demo'></div> 42 <script> 43 44 </script> 45 </body> 46 </html>