旧的clip
旧的css也提供了一个clip属性,但这个属性只能用于裁剪一个矩形,其本质是根据overflow:hidden隐藏掉了裁剪外的区域,使用:
clip:rect(<top>,<right>,<bottom>,<left>);
上右下左的偏移量,都是从元素盒子边缘算起,如图所示。
注意:clip属性只能在元素设置了“position:absolute|fixed”时起作用。
clip-path
clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none
其默认值是none。
另外简单介绍clip-path几个属性值:
clip-source: 可以是内、外部的SVG的<clipPath>元素的URL引用
basic-shape: 使用一些基本的形状函数创建的一个形状。主要包括circle()、ellipse()、inset()和polygon()。具体的说明可以看CSS Shapes中有关于说明。
geometry-box: 是可选参数。此参数和basic-shape函数一起使用时,可以为basic-shape的裁剪工作提供参考盒子。如果geometry-box由自身指定,那么它会使用指定盒子形状作为裁剪的路径,包括任何(由border-radius提供的)的角的形状。
使用clip-path有两点要注意:
1) 使用clip-path要从同一个方向绘制,如果顺时针绘制就一律顺时针,逆时针就一律逆时针,因为polygon是一个连续线段,若线段彼此有交集,裁剪区域就会有相减的情况发生,当然如果你特意需要这样的效果除外。
2) 如果绘制时采用比例的方式绘制,长宽就必须要先行设定,不然有可能绘制出来的长宽和我们想像的就会有差距,使用像素绘制就不会有这样的现象。
示例:
img{
clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);
}
举个栗子:
CCS
body {
margin: 20px auto;
text-align: center;
font-family: 'Lato';
max-width: 640px;
}
h1 {
margin-bottom: 100px;
font-size: 1.8em;
}
div {
display: inline-block;
margin: 50px 0px;
width: 250px;
height: 250px;
border-radius: 200px;
-webkit-filter: grayscale(0.9);
cursor: pointer;
}
div:hover {
-webkit-filter: none;
}
div:hover .text {
opacity: 1;
}
.text {
position: absolute;
background: rgba(200, 0, 0, 0.5);
padding: 20px 0;
top: 90px;
width: 250px;
opacity: 0;
text-align: center;
color: white;
font-size: 1.4em;
}
.left .text {
background: rgba(0, 0, 200, .5);
}
.right .text {
background: rgba(200, 100, 0, 0.5);
}
.bottom .text {
background: rgba(0, 200, 0, 0.5);
}
.top {
background: url('http://t.imgbox.com/KXaGvTFB.jpg');
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
background-size: contain;
position: relative;
left: -125px;
top: -130px;
}
.left {
background: url('http://t.imgbox.com/LHPFYSYE.jpg');
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
background-size: contain;
position: relative;
}
.right {
background: url('http://t.imgbox.com/tlgvPjwn.jpg');
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
background-size: contain;
position: relative;
top: -352px;
left: 256px;
}
.bottom {
background: url('http://t.imgbox.com/R7h6VtZr.jpg');
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
background-size: contain;
position: relative;
top: -220px;
left: -126px;
}
HTML
<h1>Images clipped with <code>clip-path</code> Property</h1>
<div class="left"><p class="text">SPORTS</p></div>
<div class="top"><p class="text">TECHNOLOGY</p></div>
<div class="right"><p class="text">FOOD</p></div>
<div class="bottom"><p class="text">NATURE</p></div>
【運用 clip-path 的純 CSS 形狀變換】这篇文章详细介绍了多边形的绘制方法。
更多不规则图形案例戳这里:http://bennettfeely.com/clippy/
使用geometry-box裁剪:
geometry-box的值可以是shape-box|fill|stroke|view-box。
shape-box应用于html元素与CSS Shapes的引用框概念类似,可以阅读Understanding Reference Boxes for CSS Shapes一文作了解。
其他三个值则是运用于svg元素上。
兼容性