Exquisite arrow code with pure css

Figure:

HTML code:

  
  
   

    

     
The code is as follows:
     
Copy code
 
    
 
    

     

      

       
<Div class = "pre-wrap"> <div class = "pre"> <div class = "pre1"> </div> <div class = "pre2"> </ div> </div>
      
      

        
      
      

       CSS code:
      
      

       
. Pre-wrap {width: 200px; height: 120px; margin: 50px auto 0; border: 2px solid # F00; border-radius: 4px; position: relative ;}. pre {width: 80px; height: 80px; position: absolute; top: 20px; left: 40px ;}. pre1 {border-width: 40px; border-color: transparent # F30 transparent ;}. pre2 {border-width: 40px; border-color: transparent # FFF transparent; position: relative; top:-80px; left: 15px ;}. pre1 ,. pre2 {/***** set border-style: dashed; enable ie6 to support border transparency *****/border-style: dashed solid dashed; /***** set the container width and height to 0 *****/width: 0; height: 0;/***** remove the default height under ie6, set the following attributes: */line-height: 0; font-size: 0; overflow: hidden ;}