CSS三角形之美案例附代码

CSS三角形之美案例附代码

1. div {
   
2. 
   
3.         width: 0;
   
4. 
   
5.     height: 0;
   
6.     line-height:0；
   
7.     font-size: 0;
   
8.         border-top: 10px solid red;
   
9. 
   
10.         border-right: 10px solid green;
    
11. 
    
12.         border-bottom: 10px solid blue;
    
13. 
    
14.         border-left: 10px solid #000;
    
15. 
    
16. }
    

复制代码

CSS三角形之美案例附代码

• 我们用css 边框可以模拟三角效果
• 宽度高度为0
• 我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
• 为了照顾兼容性 低版本的浏览器，加上 font-size: 0;  line-height: 0;