CSS实现DIV三角形

本文内容收集来自网络

[css]  view plain  copy

 

1. #triangle-up {  
2.     width: 0;  
3.     height: 0;  
4.     border-left: 50px solid transparent;  
5.     border-right: 50px solid transparent;  
6.     border-bottom: 100px solid red;  
7. }  

  
  

   
   

    
    

     
     [css] 
     
     view plain
     
      copy
     
     

     
      
     
     
     
     
    
    
   
   
   
   
#triangle-down {  
    width: 0;  
    height: 0;  
    border-left: 50px solid transparent;  
    border-right: 50px solid transparent;  
    border-top: 100px solid red;  
}  
  
  

[css]  view plain  copy

 

1. #triangle-left {  
2.     width: 0;  
3.     height: 0;  
4.     border-top: 50px solid transparent;  
5.     border-right: 100px solid red;  
6.     border-bottom: 50px solid transparent;  
7. }  

  
  

   
   

    
    

     
     [css] 
     
     view plain
     
      copy
     
     

     
      
     
     
     
     
    
    
   
   
   
   
#triangle-right {  
    width: 0;  
    height: 0;  
    border-top: 50px solid transparent;  
    border-left: 100px solid red;  
    border-bottom: 50px solid transparent;  
}  
  
  

  
  

   
   

    
    

     
     [css] 
     
     view plain
     
      copy
     
     

     
      
     
     
     
     
    
    
   
   
   
   
#triangle-topleft {  
    width: 0;  
    height: 0;  
    border-top: 100px solid red;  
    border-right: 100px solid transparent;  
}  
  
  

  
  

   
   

    
    

     
     [css] 
     
     view plain
     
      copy
     
     

     
      
     
     
     
     
    
    
   
   
   
   
#triangle-topright {  
    width: 0;  
    height: 0;  
    border-top: 100px solid red;  
    border-left: 100px solid transparent;   
}  
  
  

[css]  view plain  copy

 

1. #triangle-bottomleft {  
2.     width: 0;  
3.     height: 0;  
4.     border-bottom: 100px solid red;  
5.     border-right: 100px solid transparent;  
6. }  

  
  

   
   

    
    

     
     [css] 
     
     view plain
     
      copy
     
     

     
      
     
     
     
     
    
    
   
   
   
   
#triangle-bottomright {  
    width: 0;  
    height: 0;  
    border-bottom: 100px solid red;  
    border-left: 100px solid transparent;  
}  
  
  

[html]  view plain  copy

 

1. <!-- 外框 -->  
2. <div class="mod-container">  
3.     <!-- 小三角部分 -->  
4.     <div class="mod-triangle">  
5.         <div class="t-border"></div>  
6.         <div class="t-inset"></div>  
7.     </div>  
8. </div>  

[html]  view plain  copy

 

1. <pre code_snippet_id="2012450" snippet_file_name="blog_20161128_10_8798016" name="code" class="html">/*外框容器*/  
2. .mod-container {  
3.     width:100px;  
4.     height:60px;  
5.     border:1px solid #000;  
6.     margin:20px;  
7.     background:#fff;  
8. }  
9. /*小三角部分*/  
10. .mod-triangle {  
11.     display:block;  
12.     position:relative;  
13.     left:-23px;  
14.     top:18px;  
15.     z-index:20;  
16. }  
17. .mod-triangle .t-border,  
18. .mod-triangle .t-inset{  
19.     left:0px;  
20.     top:0px;  
21.     width:0;  
22.     height:0;  
23.     font-size:0;  
24.     overflow:hidden;  
25.     position:absolute;  
26.     border-width:12px;  
27.     /*可在此处更改小三角方向：上-右-下-左（solid的位置）*/  
28.     border-style:dashed solid dashed dashed;  
29. }  
30. /*小三角的边框，如果不需要，可将颜色值改变*/  
31. .mod-triangle .t-border{  
32.     border-color:transparent #000 transparent transparent;  
33.     left:-1px;  
34. }  
35. .mod-triangle .t-inset{  
36.     border-color: transparent #fff transparent transparent;  
37. }</pre><p></p>  
38. <pre></pre>  
39. <p></p>  
40. <p> </p>