Draw triangles with CSS3 and pseudo-elements

How to do this, refer to the right link: 1190000002783179

To improve, do not want a label, you can directly take advantage of pseudo-elements, as shown in the following code example:

HTML code:

1                   <Divclass= "Box_finished">2                         <h6class= "F16 lh30">Complete the course</h6>3                         <Pclass= "C6 line_time">2015-11-01&nbsp;&nbsp;11:57:33</P>4                         <Divclass= "Fix mt15">5                             <ahref="#"class= "L"Target= "_blank"><imgsrc=".. /pxb/02.jpg "alt=""width= "The "Height= "The "></a>6                             <Divclass= "L ml20 wd450">7                                 <aclass= "F14"href="#"Target= "_blank">Options Hedging Trading Strategy</a>8                                 <P>As a reminder of the industry's ability to recognize and manipulate the hedging function in the context of options trading, the China Futures Industry Association and ...</P>9                             </Div>Ten                         </Div> One                     </Div>

CSS code:

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{Ten Border-bottom:9px Solid Transparent; One Border-right:9px Solid #f88; A Border-top:9px Solid Transparent; - content: " "; - Display:Block;//This property must be added, if you do not use absolute positioning the Height:0; - Margin-left:-19px; - width:0; -}

As shown below:

The reason for such an ugly match is to facilitate identification, but also for the convenience of working in the future need to use convenient search.

Draw triangles with CSS3 and pseudo-elements