用CSS3和僞元素繪製三角形

具體怎樣的寫法，參照右邊連接：https://segmentfault.com/a/1190000002783179

加以改良，不想多一個標籤，能夠直接利用僞元素，如下面代碼爲例所示：

html代碼：

 1                   <div class="box_finished">
 2                         <h6 class="f16 lh30">完成課程</h6>
 3                         <p class="c6 line_time">2015-11-01&nbsp;&nbsp;11:57:33</p>
 4                         <div class="fix mt15">
 5                             <a href="#" class="l" target="_blank"><img src="../pxb/02.jpg" alt="" width="86" height="68"></a>
 6                             <div class="l ml20 wd450">
 7                                 <a class="f14" href="#" target="_blank">期權套期保值交易策略</a>
 8                                 <p>爲提示行業內人士對於選擇權交易在套期保值功能方面的認知及操做能力，中國期貨業協會及...</p>
 9                             </div>
10                         </div>
11                     </div>

css代碼：

 1 .box_finished {
 2     background: #f60 none repeat scroll 0 0;
 3     border-radius: 3px;
 4     margin: -10px 0 30px;
 5     padding: 10px;
 6     width: 580px;
 7 }
 8 
 9 .box_finished::before {
10     border-bottom: 9px solid transparent;
11     border-right: 9px solid #f88;
12     border-top: 9px solid transparent;
13     content: " ";
14     display: block;//這個屬性必定要加，若是不使用絕對定位的話
15     height: 0;
16     margin-left: -19px;
17     width: 0;
18 }

效果圖以下所示：

之因此改爲這麼醜的搭配是爲了方便辨認；更是爲了方便之後本身工做時須要使用方便查找。