【css】用边框border实现各种各样的形状

前言:前端性能优化中有一个准则是:能用css实现的图标(图片)就尽量用css去实现,达到减少图片使用的目的,从而减少从服务器请求的资源。该篇就说说怎么用边框border实现各种各样的形状。

 

一、圆形


    
    

 

二、扇形


    
    

【css】用边框border实现各种各样的形状_第1张图片

 

三、椭圆形


    
    

【css】用边框border实现各种各样的形状_第2张图片

 

四、叶子形状


    
    

【css】用边框border实现各种各样的形状_第3张图片

 

五、角标


    
    

【css】用边框border实现各种各样的形状_第4张图片

 

六、等腰三角形


    
    

【css】用边框border实现各种各样的形状_第5张图片

 

七、等腰三角形(箭头)


    
    

【css】用边框border实现各种各样的形状_第6张图片

八、菱形


    
    

【css】用边框border实现各种各样的形状_第7张图片

 

九、直角三角形


    
    

 

 

直角三角形扩展应用


    
    

 【css】用边框border实现各种各样的形状_第8张图片

 

十、直角梯形


    
    

【css】用边框border实现各种各样的形状_第9张图片

 

十一、光晕效果

【css】用边框border实现各种各样的形状_第10张图片


    
        

 

你可能感兴趣的:(css)