网站公告:网站资料更新中...
新闻动态 >> 返回 您当前所在位置:首页 > 新闻资讯 > 新闻动态 > 正文

奇妙的CSS shapes!

更新时间:2018-02-21 13:49:39点击次数:611次字号:T|T
CSS 发展到今天,已经越来越强大了,其语法的日新月异让很多以前完成不了的事情现在可以非常轻松的做到。今天就向大家介绍如何利用CSS制作各种图形...


奇妙的CSS shapes,让你耳目一新!


CSS 发展到今天

已经越来越强大了

其语法的日新月异

让很多以前完成不了的事情

现在可以非常轻松的做到

今天就向大家介绍

如何利用CSS制作各种图形



CSS  shapes


CSS shapes 就是 CSS 图形,也就是使用 CSS 生成各种图形(圆形、矩形、椭圆、多边形等几何图形)。CSS3之前,我们能做的只有矩形,四四方方,条条框框。CSS3出来后,我们有了更广阔的施展空间。通过

      ●   border-radius

      ●    border

      ●    transform

      ●    伪元素配合

      ●    gradient 渐变

我们能够作出非常多的几何图形。

除去最常见的矩形,圆形(border-radius),下面列举一些其他几何图形的做法。



   No.1   三角形   

— 通常使用透明的border模拟出一个三角形  —




    No.2   切角    

—  采用多重线性渐变实现切角  —




    No.3   梯形    

—  利用伪元素加旋转透视实现梯形  —



当然,还有另一种更简单的方法是利用border实现,借助上面的构造三角形的方法,在矩形两侧构造两个透明的三角形。




    No.4    五边形    

—  利用伪元素实现五边形  —



    No.5   六边形     

—  两个反方向相同的梯形叠加在一起 —



     No.6   八边形      

—  一个矩形加上两个梯形  —



    No.7   五角星     

—  三个三角形叠加旋转  —



     No.8    六角星      

—  两个三角形叠加  —




   No.9   八角星   

—  两个矩形旋转拼接  —




    No.10   十二角星    

—  三个矩形旋转拼接  —



    No.12    椭圆    

—  借助border实现一个蛋的形状  —



以上是CSS绘制几何图形传统方法

随着CSS的不断进步

更高级的绘制方法也不断增加

想要继续了解更多相关知识

请持续关注小金哦!




(编辑:admin)
Tel:400-888-9789
QQ:400-888-9789