搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > 前端菜鸟教程 > 奇妙的 CSS shapes(CSS图形)

奇妙的 CSS shapes(CSS图形)

前端菜鸟教程 2017-10-31

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

  • clip-path

  • shape-outside

shape 的意思是图形,CSS shapes 也就是 CSS 图形的意思,也就是使用 CSS 生成各种图形(圆形、矩形、椭圆、多边形等几何图形)。

CSS3之前,我们能做的只有矩形,四四方方,条条框框。

CSS3

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

  • border-radius

  • border

  • transform

  • 伪元素配合

  • gradient 渐变

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

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

三角形

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

.traingle {

  width0;

  height0;

  border-left50px solid transparent;

  border-right50px solid transparent;

  border-bottom100px solid yellowgreen;

}

 

切角

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

.notching {

    width: 40px;

    height: 40px;

    padding: 40px;

    background: linear-gradient(135deg, transparent 15px, yellowgreen 0) top left,

        linear-gradient(-135deg, transparent 15px, yellowgreen 0) top right,

        linear-gradient(-45deg, transparent 15px, yellowgreen 0) bottom right,

        linear-gradient(45deg, transparent 15px, yellowgreen 0) bottom left;

    background-size: 50% 50%;

    background-repeat: no-repeat;

}

奇妙的 CSS shapes(CSS图形)

梯形

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

.trapezoid{

    position: relative;

    width: 60px;

    padding: 60px;

}

 

.trapezoid::before{

    content:"";

    position: absolute;

    top: 0; right: 0; bottom: 0; left: 0;

    transform: perspective(20px) scaleY(1.3) rotateX(5deg);

    transform-origin: bottom;

    background: yellowgreen;

}

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

.trapezoid {

    position: relative;

    width: 60px;

    border-top: 60px solid yellowgreen;

    border-left: 40px solid transparent;

    border-right: 40px solid transparent;

}

奇妙的 CSS shapes(CSS图形)

五边形

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

.pentagon {

    position: relative;

    width: 60px;

    border-bottom: 60px solid yellowgreen;

    border-left: 40px solid transparent;

    border-right: 40px solid transparent;

}

 

.pentagon::before {

    content:"";

    position: absolute;

    top: 60px;

    left: -40px;

    border-top: 60px solid yellowgreen;

    border-left: 70px solid transparent;

    border-right: 70px solid transparent;

}

奇妙的 CSS shapes(CSS图形)


六边形

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

.pentagon {

    position: relative;

    width: 60px;

    border-bottom: 60px solid yellowgreen;

    border-left: 40px solid transparent;

    border-right: 40px solid transparent;

}

.pentagon::before {

    content: "";

    position: absolute;

    width: 60px;

    height: 0px;

    top: 60px;

    left: -40px;

    border-top: 60px solid yellowgreen;

    border-left: 40px solid transparent;

    border-right: 40px solid transparent;

}

奇妙的 CSS shapes(CSS图形)

五角星

好的,探索完多边形,我们继续探索X角星。

先来看看五角星,要怎么实现呢?当然是直接打出来啦 — ★☆

奇妙的 CSS shapes(CSS图形)

开个玩笑,这里使用 3 个三角形叠加旋转在一起实现。


.star {

   margin: 50px 0;

   position: relative;

   width: 0;

   border-right: 100px solid transparent;

   border-bottom: 70px  solid yellowgreen;

   border-left: 100px solid transparent;

   transform: rotate(35deg) scale(.6);

}

.star:before {

    content: '';

    position: absolute;

    border-bottom: 80px solid yellowgreen;

    border-left: 30px solid transparent;

    border-right: 30px solid transparent;

    top: -45px;

    left: -65px;

    transform: rotate(-35deg);

}

.star:after {

    content: '';

    position: absolute;

    top: 3px;

    left: -105px;

    border-right: 100px solid transparent;

    border-bottom: 70px solid yellowgreen;

    border-left: 100px solid transparent;

    transform: rotate(-70deg);

}

奇妙的 CSS shapes(CSS图形)


上面所讲述的是使用传统 CSS3 的方式绘制几何图形,接下来我们将要了解一些更高级的绘制几何图形的方法。

clip-path

CSS 新属性 clip-path,意味裁剪路径的意思,让我们可以很便捷的生成各种几何图形。

clip-path 通过定义特殊的路径,实现我们想要的图形。而这个路径,正是 SVG 中的 path 。

clip-path 动画

clip-path 另外一个强大之处在于可以进行 CSS transtion 与 CSS animation,也就是过渡和动画。

看一个多边形的过渡切换动画。

图形变换动画

除此之外,我们还可以尝试,将一个完整的图形,分割成多个小图形,这也是 clip-path 的魅力所在,纯 CSS 的图形变换:

clip-path 动画的局限

clip-path 动画虽然美好,但是存在一定的局限性,那就是进行过渡的两个状态,坐标顶点的数量必须一致。

也就是如果我希望从三角形过渡到矩形。假设三角形和矩形的 clip-path 分别为:

  • 三角形:clip-path: polygon(50% 0, 0 100%, 100% 0)

  • 矩形: clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)

进行过渡动画时候,直接从 polygon(50% 0, 0 100%, 100% 0) –> polygon(0 0, 100% 0, 100% 100%, 0 100%) 是不行的,因为是从 3 个坐标点变换到 4 个坐标点。

因此这里需要这用一个讨巧的办法,在三角形的表示方法中,使用四个坐标点表示,其中两个坐标点进行重合即可。也就是:

  • 三角形:clip-path: polygon(50% 0, 0 100%, 100% 0) -> clip-path: polygon(50% 0, 50% 0, 0 100%, 100% 0)

clip-path

属性的兼容性目前仍处于比较尴尬的境地。感兴趣的可以看看 CANIUSE 。全面兼容使用仍需努力。是在 -webkit- 内核浏览器下完成的。

版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《奇妙的 CSS shapes(CSS图形)》的版权归原作者「前端菜鸟教程」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注前端菜鸟教程微信公众号

前端菜鸟教程微信公众号:gh_d2fe46dd25a0

前端菜鸟教程

手机扫描上方二维码即可关注前端菜鸟教程微信公众号

前端菜鸟教程最新文章

精品公众号随机推荐