clip-path的使用和实践

欢迎访问我的个人站点

demo演示

多边形图

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

应用

变成

思路：分别是四块，那么就先切除四块菱形的，然后通过定位定到一起
怎么切成四块菱形呢，先整除四块方块的然后再切成菱形的，四块方块的大小为整个图片的一半，
但是方块怎么弄成不一样的呢，通过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;
    }

效果图

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

效果图：

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就可以了效果就是这样

看着这样，感觉马上就要成功了，怎么让他们合在一起呢，设置一下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种变换，看了之后简直打开眼界。