css3

CSS3 clip-path图形剪裁

Posted by Mia Yu on February 28, 2017

CSS3中的clip-path可以遮罩很多图形，它的原理其实是将超出剪裁范围的内容overflow设置为hide了，该属性可以剪裁多种不同的图形效果，算是比较方便实用的工具，但目前看来该属性浏览器兼容性不佳，ie和firefox并不兼容，chrome可以支持，我在chrome尝试了几个简单的例子。

1.圆形circle 

//html
<div class='container'>
  <div class='content clip-sty'></div>
</div>
//css
.clip-sty{
  -webkit-clip-path: circle(95px at 100px 100px);
}

原理很简单，其实就是一个div，添加一个clip-path: circle(95px at 100px 100px)的属性,第一个参数代表指定圆的半径，最后两个参数代表圆心的坐标位置，容器的左上角为坐标原点（0,0），这些数值也可以用百分比表示，如：clip-path: circle(45% at 50% 50%)，超出剪裁外的部分会被隐藏。虽然说圆形的话我们有另一个更快捷的属性：border-radius就能轻松办到,但这也不失为一种很有用的工具。

2.椭圆ellipse 

.clip-sty{
  -webkit-clip-path: ellipse(80px 60px at 100px 100px);
}

与圆形十分类似，（100px,100px）表示圆心位置，80px表示较长半径，60px表示短半径，也可用百分比形式表示。

3.圆角效果inset 用这个属性可以创造出一些圆角效果，例如圆角矩形啊等，如图： 

.clip-sty{
  -webkit-clip-path:inset(20% 0 20% 0 round 0 0 25% 25%);
}

inset使用四个值分别对应“上 右 下 左”的顺序，前4个值对应的是外边距，后4个值对应四个角的圆半径值。

4.多边形polygon 写法：clip-path: polygon(x y, x y, x y … );可以定义多组x,y，每个 (x,y)代表剪裁的坐标，以左上角为初始坐标，如图： 

.clip-sty{
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

更多clip-path裁剪多边形示例可以参照： https://github.com/yomonah/react-demo/tree/master/src/components/clip

CATALOG
    FRIENDS