div+css 画三角形

 

 

 

 

<style type="text/css">  
.rightdirection  
{  
    width:0;height:0;  
    line-height:0;  
    border-width:20px;  
    border-style:solid;  
    border-color:transparent transparent transparent #A9DBF6;  
}  
.bottomdirection  
{  
    width:0;height:0;  
    line-height:0;  
    border-width:20px;  
    border-style:solid;  
    border-color: #A9DBF6 transparent transparent transparent;  
}  
.leftdirection  
{  
    width:0;height:0;  
    line-height:0;  
    border-width:20px;  
    border-style:solid;  
    border-color: transparent #A9DBF6  transparent transparent;  
}  
.topdirection  
{  
    width:0;height:0;  
    line-height:0;  
    border-width:20px;  
    border-style:solid;  
    border-color: transparent transparent #A9DBF6 transparent;  
}  
.topdirection1  
{  
    width:0;height:0;  
    line-height:0;  
    border-width:20px;  
    border-style:solid;  
    border-color: #A9DBF6   transparent transparent #A9DBF6 ;  
} 
</style>  
<div  class="rightdirection"></div>  
<p>  
<div  class="bottomdirection"></div>  
<p>  
<div  class="leftdirection"></div>  
<p>  
<div  class="topdirection"></div>  

<br/><br/><br/><br/>
<div  class="topdirection1"></div>  

　　/****字体倾斜***/

.telta span{ color: #fff; font-weight: bold; position: absolute; margin-top: -5px; margin-left: -9px; -webkit-transform:rotate(-45deg); }