demo演示

多边形图

image.png

demo1

利用css Transition制作动画

demo2

介绍

CSS 的 clip-path 属性是改变传统单调的盒子布局,走向响应式设计的通行证。可以摆脱条条框框,自由地在网页上使用六边形、星形等等等进行设计。

如何使用

  • 使用 CSS ( Chrome 24+, Safari 7+, Opera 15+, iOS 7.1+, Android 4.4+, Opera Mobile 24+(注意:所有目前支持的浏览器都需要一个-webkit前缀))
  • 使用SVG(上面列出的所有浏览器以及Firefox3.5+)

    • 内敛SVG引用
    • 外部SVG文件的引用

语法

http://bennettfeely.com/clippy/

基础多边形

 .element { clip-path: ploygon(x1 y1, x2 y2, x3 y3, ...) }

x y分别是每个点的坐标,点的绘制会根据顺时针的方向,然后根据直线连接起来

圆形

.element { clip-path: circle(r at x y) };

r是圆的大小,x y分别是圆心的坐标。可以用百分比

椭圆

.element { clip-path: ellipse(w h at x y) };

w为水平宽度,h为垂直高度,x y为椭圆的圆心

矩形

.element { clip-path: inset(x y z p) };

x为离top的距离 y为right的距离 z为bottom的距离 p为left的距离。跟多边形一样也是顺时针,跟多边形不同的是多边形是用边来使用的

svg使用语法

.element { clip-path: url("选择器")}

demo实现

demo1
demo2

应用

image.png
变成
image.png

思路:分别是四块,那么就先切除四块菱形的,然后通过定位定到一起
怎么切成四块菱形呢,先整除四块方块的然后再切成菱形的,四块方块的大小为整个图片的一半,
但是方块怎么弄成不一样的呢,通过background-position来设置背景图片位置就可以达到想要的结果了

第一步

四块图片代码如下:
html

  <div class="img-clip-block">
    <div class="img-clip-wrap">
    </div>
    <div class="img-clip-wrap">
    </div>
    <div class="img-clip-wrap">
    </div>
    <div class="img-clip-wrap">
    </div>
  </div>

css

.img-clip-wrap {
      width: 300px;
      height: 300px;
      background-image: url("http://karenmenezes.com/shapes-polygon/clip-demo.jpg");
      background-repeat: no-repeat;
      margin-left: auto;
      margin-right: auto;
      display: block;
      position: relative;
    }

效果图
image.png

第二步 切成菱形块,并根据backgrount-position设置成对应的位置

效果图:
image.png
html代码没变,
css代码:

   .img-clip-wrap {
      width: 300px;
      height: 300px;
      background-image: url("http://karenmenezes.com/shapes-polygon/clip-demo.jpg");
      background-repeat: no-repeat;
      margin-left: auto;
      margin-right: auto;
      display: block;
      position: relative;
    +  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    + clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    }
    .img-clip-wrap:nth-of-type(1) {
        background-position: top;
    }
    .img-clip-wrap:nth-of-type(2) {
        background-position: left;
    }
    .img-clip-wrap:nth-of-type(3) {
        background-position: right;
    }
    .img-clip-wrap:nth-of-type(4) {
        background-position: bottom;
    }

第三步 调整位置

观察我们要做的图,布局可以是分成三行,其中第二行应该有两个块,然后合在一起, 让第二行左右排列的话,只需要设置菱形块display为inline-block就可以了效果就是这样
image.png
看着这样,感觉马上就要成功了,怎么让他们合在一起呢,设置一下margin-top为负的就好了,最终效果就出来啦,最终代码:

  <div class="img-clip-block">
    <div class="img-clip-row">
      <div class="img-clip-wrap">
      </div>
    </div>

    <div class="img-clip-row">
      <div class="img-clip-wrap">
      </div>
      <div class="img-clip-wrap">
      </div>
    </div>

    <div class="img-clip-row">
      <div class="img-clip-wrap">
      </div>
    </div>
  </div>

增加的css

   .img-clip-row {
      margin-top: -154px;
    }

    .img-clip-row:first-of-type {
      margin-top: auto;
    }

    .img-clip-wrap {
      display: inline-block;
    }

点我获取完整代码
点我获取升级demo

扩展

本文只是介绍了最基础的知识语法和一点小应用,但是这还是太简单的东西了。
大漠在微博上分享的这个网站:http://species-in-pieces.com/,30个动物30种变换,看了之后简直打开眼界。

参考文章

打破盒子模式的限制,使用Clip-Path创建响应式图形
clipping-masking-css

标签: css, clip-path

添加新评论