css中clip-path属性的运用

今天看到一位同窗的需求，要在一个div中加一个小尖尖，对话时发的图片，旁边这个三角是怎么实现与图片的颜色一致，效果以下：

固然，解决这个问题有各类奇淫巧技，如今咱们来看一个css属性clip-path，很炫酷。

看属性，确定要说兼容性问题，clip-path之因此没有很普及，也是由于其浏览器兼容问题。不少IE浏览器对齐属性不是很支持。咱们看下他的浏览器兼容：

咱们看到IE是彻底不支持，尽可能使用webkit内核，须要加上内核前缀-webkit-（转自haorooms博客）。

clip-path，包括了一条闭合的矢量路径，它能够是CSS中定义的基础形状，也能够是包含了clipPath标签的SVG元素。在闭合路径内的内容会显示，而路径外边的都会被剪掉。

CSS Shapes Module中的基础形状提供了一个很是方便的使用clip-path的方法。它有多种不一样的可使用的形状如polygon,circle, ellipse 和 inset；其中，inset是矩形。

基本语法：

.element {

      clip-path: polygon(x1 y1, x2 y2, x3 y3, ...);

}

跨浏览器的代码写法：

.element {

    -webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 80% 100%);

    clip-path: polygon(0 100%, 0 0, 100% 0, 80% 100%);

    -webkit-clip-path: url("#clip-shape"); /* 在Webkit或Blink浏览器中须要添加，若是你只使用内联SVGclipping path，而不是CSS clip-path的话 */ clip-path: url("#clip-shape");

}

.clip {

    /* 引用一个内联的 SVG <clipPath> 路径*/ clip-path: url(#c1);

    /* 引用一个外部的 SVG 路径*/ clip-path: url(path.svg#c1);

    /* 多边形 */ clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

    /* 圆形 */ clip-path: circle(30px at 35px 35px); /* 椭圆 */ clip-path: ellipse(65px 30px at 125px 40px);

    /* inset-rectangle() 将会替代 inset() ? */

    /* rectangle() 有可能出现于 SVG 2 */

    /* 圆角 */ clip-path: inset(10% 10% 10% 10% round 20%, 20%);

}

看完是否是想吐槽了，这参数设置好头疼啊。。。哈哈，推荐一个maker工具，你画好图形，代码就在下面。。。

连接接着，走好不送——http://bennettfeely.com/clippy/，这个网站貌似挂了。。。

瞅瞅这个吧：

http://tools.jb51.net/code/css3path

追加：最近作了一个相似的“VS的上下碰撞产生PK”的动画效果：

 

.pkup{

　　-webkit-clip-path: polygon(0 0, 100% 0, 100% 35%, 0 60%);
　　clip-path: polygon(0 0, 100% 0, 100% 35%, 0 60%);
}

.pkdown{

　　-webkit-clip-path: polygon(0% 60%, 100% 35%, 100% 100%, 0 100%);　　clip-path: polygon(0% 60%, 100% 35%, 100% 100%, 0 100%);}