目录
clip-path属性值basic-shape的几个创造图形函数使用详解:
一、Clip-Path有什么作用
从图形交互界面发展伊始,WEB前端作为一个能直接和用户打交道的图形界面,就必然会经历一个从简单图形化、复杂用户操作到美观吸睛、无门槛上手的过程。
Web前端的网页设计多以矩形分布,而平面媒体的设计则倾向于多元化图形。之所以会造成这种设计上的差异是因为缺少合适的工具。这也就造成了设计师的创意发挥,前端也难以完全复刻。
不过值得庆幸的是,CSS的clip-path出现,它可以帮助我们绘制很多特殊的图形(不规则的图形)
浏览器兼容性:
IE 和 Edge 不支持这个属性。Firefox 仅部分支持 clip-path (它只支持 url() 语法)。但是 47 以上的版本,激活 Firefox 的layout.css.clip-path-shapes.enabled选项就可以支持这个属性了。
Chrome、Safari 和 Opera 需要使用 -webkit- 前缀支持此属性。不幸的是,它们还不支持外部的 SVG 形状。
二、什么是Clip-Path
clip-path从单词"clip path"的直译过来就是:裁剪路径。
clip-path 简单的工作原理是提供一系列的X和Y值来创建路径。当使用这些值创建一条完整路径时,就会把图像按照路径内部的尺寸进行裁剪。
利用clip-path,我们可以创建圆形、椭圆和多边形等不同的形状,创造力是唯一的限制。
- 裁剪:就是从某样东西剪切一块。比如说,我们在<img>元素上,根据需要,剪切一部分需要留下的区域。
- 裁剪路径:是我们用来裁剪元素的路径,它标记了我们需要裁剪的区域。它可以是个简单的形状(比如Web中常见的矩形),也可以是一个复杂的多边形(不规则的多边形)。
- 裁剪区域:是裁剪路径闭合后所包含的全部区域。
这样一来,元素分为两部分,裁剪区域和裁剪区域外。浏览器会裁剪掉裁剪区域以外的区域,不仅是背景及其它类似的内容,也包括border、text-shadow 等。更赞的是,浏览器不会捕获元素裁剪区域以外的 hover、click 等事件。
亲,如果您是第一次接触过clip属性,这边建议您看一下这篇文章,对clip有个简单的了解,帮助您更好的学习Clip-path属性呢{ 戏精一下:)}
三、Clip-Path 语法
W3C官方规范提供的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()。(文末有详解)
- geometry-box: 是可选参数。此参数和basic-shape函数一起使用时,可以为basic-shape的裁剪工作提供参考盒子。如果geometry-box由自身指定,那么它会使用指定盒子形状作为裁剪的路径,包括任何(由border-radius提供的)的角的形状。
四、如何使用Clip-Path
在开始使用clip-path绘制图形,或者裁剪图形之前,有两点需要注意:
- 使用clip-path要从同一个方向绘制,如果顺时针绘制就一律顺时针,逆时针就一律逆时针,因为polygon是一个连续线段,若线段彼此有交集,裁剪区域就会有相减的情况发生(特意需求此效果除外)。
- 如果绘制时采用比例的方式绘制,长宽就必须要先行设定,不然有可能绘制出来的长宽和我们想像的就会有差距,使用像素绘制就不会有这样的现象。
1、使用polygon()剪切元素
polygon()函数:用于定义一个多边形,也可以用来剪裁图形。它的参数是一组坐标对(<shape-arg> <shape-arg>),每一个坐标对代表多边形的一个顶点坐标。浏览器会将最后一个顶点和第一个顶点连接得到一个封闭的多边形。坐标对使用逗号来进行分隔,可以使用绝对单位或百分比单位值。
补充:除了坐标对参数,polygon()函数还可以使用一个可选的关键字fill-rule。该关键字指定如何处理可能相交的多边形形状的区域。可取值有nonzero 和evenodd。默认值为nonzero。
下面都是有效的polygon()函数声明:
polygon(0 0, 100% 100%, 0 100%);
polygon(0 0, 100% 100%, 0 100%);
polygon(50px 0px, 100px 100px, 0px 100px);
polygon(evenodd, 446.33px 452.00px, 443.63px 246.82px, 389.92px 245.63px, ...);
来个实例:
img {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
每个点的第一个坐标值决定了它在 x 轴上的位置,第二个坐标值指定了它在 y 轴的位置,所有点是顺时针绘制的。比如菱形最右边的点,它位于 y 轴下方一半处,所以它的 y 坐标是 50%。同时这个点位于 x 轴的最右侧,所以它的 x 坐标是 100%。其它点的坐标同理可得。
来个实例:
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clip path</title>
<style type="text/css">
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;
filter: grayscale(0.9);
cursor: pointer;
}
div:hover {
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(u=266890504,2628142078&fm=26&gp=0.jpg);
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
position: relative;
left: -125px;
top: -130px;
}
.left {
background:url(u=1256414992,1036042548&fm=26&gp=0.jpg);
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
position: relative;
}
.right {
background:url(%E4%B8%8B%E8%BD%BD.jpg);
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
position: relative;
top: -352px;
left: 264px;
}
.bottom {
background:url(12.jpg);
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
position: relative;
top: -220px;
left: -126px;
}
</style>
</head>
<body>
<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>
</body>
</html>
效果图:
2、利用 geometry-box 裁剪元素
在使用geometry-box来裁剪元素之前,对geometry-box做一下相关的了解。
geometry-box可以是shape-box、fill、stroke或者view-box。其中shape-box应用于HTML元素,它具有四种值:margin-box、border-box、padding-box和content-box。
来看个简单的示例:
.clip-me {
clip-path: polygon(10% 20%, 20% 30%, 50% 80%) margin-box;
margin: 10%;
}
在上例中,元素的 margin-box 会作为参考,来决定裁剪点的实际位置。点(10%,10%)是 margin-box 的左上角,所以clip-path 的定位会根据此点进行计算。
其实shape-box和CSS Shapes中的引用框概念非常类似。
如果geometry-box和basic-shape一起使用,可以引用basic-shape提供的引用框。其作用和shape-outside属性类似。
如果geometry-box由自身指定,那么它会使用指定盒子形状作为裁剪的路径,包括任何(由border-radius提供的)的角的形状。
除了shape-box值,还可以运用SVG元素上,它具有另外三个值:fill、stroke和view-box。
五、拓展
clip-path属性值basic-shape的几个创造图形函数使用详解:
1、circle() – 圆
语法如下:
circle( [<shape-radius>]? [at <position>]? )
其中问号?是正则表达式中的特殊字符,表示0和1,也就是说shape-radius(圆半径)和position(圆心位置)都是可以缺省的,表示。因此,下面的写法都是合法的:
shape-outside: circle();
shape-outside: circle(50%);
shape-outside: circle(at 50% 50%);
shape-outside: circle(50% at 50% 50%);
shape-outside: circle(50px at 50px 50px);
circle();
/* 使用默认值:圆形使用closest-side作为半径,圆形位于元素的中心 */
circle(100px at 30% 50%);
/* 圆形的半径为100像素,位于元素的水平30%,垂直50%的位置 */
circle(farthest-side at 25% 25%);
/* 圆形的半径为最远边的一半,位于元素的水平25%,垂直25%的地方 */
circle(10em at 500px 300px);
2、ellipse() – 椭圆
语法如下:
ellipse( [<shape-radius>{2}]? [at <position>]? )
x轴半径,y轴半径,以及椭圆的圆心位置。以下都是合法的:
shape-outside: ellipse();
shape-outside: ellipse(50px 75px);
shape-outside: ellipse(at 50% 50%);
shape-outside: ellipse(50px 75px at 50% 50%);
x,y半径除了具体数值,还支持farthest-side和closest-side这两个关键字,顾名思义,分别表示到最长边的长度和最短边的长度。
例如:
ellipse(farthest-side closest-side at 25% 25%)
表示在浮动元素25% 25%位置,以距离浮动元素最长边的距离作为椭圆的x坐标,以距离浮动元素边缘最短的距离作为椭圆的y坐标。
于是,有如下的效果图(浮动元素尺寸100*100,红色点标记是25% 25%位置,可以看出椭圆的轮廓):
ellipse();
/* 使用默认值 */
ellipse(100px 50px at 30% 50%);
/* 椭圆形的X轴半径100像素,Y轴半径50像素。圆心位于水平30%,垂直50%的地方 */
ellipse(farthest-side closest-side at 25% 25%);
/* 椭圆形的X轴半径为farthest-side,Y轴半径为closest-side。圆心位于水平25%,垂直25%的地方 */
ellipse(10em 10em at 500px 300px);
/* 椭圆形的X轴半径和Y轴半径都为10em。圆心位于水平500像素,垂直300像素的地方 */
3、inset() – 内矩形(包括圆角矩形)
语法如下:
inset( <shape-arg>{1,4} [round <border-radius>]? )
其中shape-arg是必须参数,可以是1~4个值。当提供所有前四个参数时,它们表示从参考框向内的顶部,右侧,底部和左侧偏移,也就是定义了插入的矩形的边缘位置。 这些参数遵循边距缩写的语法(类似margin、padding等属性),我们可以使用1个,2个,3个或4个值。border-radius表示圆角大小,可以缺省。除了4个偏移值,如果要指定圆角,必须带上round
关键字。
因此,下面这些写法都是合法的:
shape-outside: inset(10px);
shape-outside: inset(10px 20px);
shape-outside: inset(10px 20px 30px);
shape-outside: inset(10px 20px 30px 40px);
shape-outside: inset(10px 20px 30px 40px round 10px);
下面都是有效的inset()函数声明。
inset(10% 20% round 5px);
/*一个带5像素圆角的矩形,上下2条边向内10%,左右2条边向内20%*/
inset(15px 20px 30px);
inset(25% round 10px 30px);
inset(10px 20px 30px 40px round 10px);
- polygon() – 多边形
*请看上文,已解释*
本文属于半参考半原创型文章