目录

一、 Clip-Path有什么作用 

二、什么是Clip-Path 

三、Clip-Path 语法 

四、 如何使用Clip-Path 

五、 拓展 

clip-path属性值basic-shape的几个创造图形函数使用详解： 

1、circle() – 圆 

2、ellipse() – 椭圆 

3、inset() – 内矩形（包括圆角矩形） 

4、 polygon() – 多边形 

一、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);    

  1. polygon() – 多边形

*请看上文，已解释*

本文属于半参考半原创型文章

点击查看参考文章

# css # html # html5 # css3
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

【目标检测】目标检测的一些常用神经网络模型及方法

我的阶段性总结????文章目录1.概述1.2 目标检测的任务1.3 目标检测的分类2.R-CNN系列2.1 [R-CNN（Region with CNN features）](https://arxiv.org/pdf/1311.2524.pdf)2.2 [Fast R-CNN](https://www.cv-foundation.org/openaccess/content_iccv_2015/

avatar GitCode 开源社区
cover

用C++实现4种YOLO目标检测（内附完整代码）

avatar GitCode 开源社区
cover

静态时序分析：SDC约束命令create_generated_clock详解（上）

avatar GitCode 开源社区