css-三角形

三角形css样式

.triangle { 
    position:relative;
    width:50px;
    height:50px; 
    margin:100px auto; 
    border:1px solid red; 
}
.triangle em, .triangle strong {
    position:absolute; top:50%; left:50%;
 }
em {  
    margin-left:-9px; 
    margin-top:-5px;
    border:9px dashed transparent; 
    border-top:9px solid #ccc; 
}
strong { 
    margin-left:-7px; 
    margin-top:-5px; 
    border:7px dashed transparent; 
    border-top:7px solid #fff; 
}

三角形html结构

   <div class="triangle">
      <em></em>
      <strong></strong>
   </div>