念念不忘
必有回响

有趣的CSS题目 — 奇妙的 CSS shapes(CSS3图形)【上】

CSS 发展到今天已经越来越强大了。其语法的日新月异,让很多以前完成不了的事情,现在可以非常轻松的做到。今天就向大家介绍几个比较新的强大的 CSS 功能:

  • clip-path
  • shape-outside

shape 的意思是图形,CSS shapes 也就是 CSS 图形的意思,也就是使用 CSS 生成各种图形(圆形、矩形、椭圆、多边形等几何图形),CSS3之前,我们能做的只有矩形,四四方方,条条框框。

CSS3

CSS3出来后,我们有了更广阔的施展空间,通过

  • border-radius
  • border
  • transform
  • 伪元素配合
  • gradient 渐变

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

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

三角形

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

有趣的CSS题目 -- 奇妙的 CSS shapes(CSS3图形)【上】

切角

《CSS Secret》里面的方法,采用多重线性渐变实现切角。

有趣的CSS题目 -- 奇妙的 CSS shapes(CSS3图形)【上】

梯形

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

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

有趣的CSS题目 -- 奇妙的 CSS shapes(CSS3图形)【上】

五边形

梯形加上三角形,很容易就组合成一个五边形,这里需要借助一个伪元素实现:

有趣的CSS题目 -- 奇妙的 CSS shapes(CSS3图形)【上】

六边形

看看上面的梯形,如果两个反方向且底边同样大小的梯形,叠加在一起,是不是就能得到一个六边形呢?

有趣的CSS题目 -- 奇妙的 CSS shapes(CSS3图形)【上】

八边形

六边形都解决了,八边形也不在话下,一个矩形加上两个梯形,可以合成一个八边形。

有趣的CSS题目 -- 奇妙的 CSS shapes(CSS3图形)【上】

原文转载:传送门

赞(0) 打赏
未经允许不得转载:小蚁上树 » 有趣的CSS题目 — 奇妙的 CSS shapes(CSS3图形)【上】
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址