使用 clip-path 绘制多种图形

这篇具有很好参考价值的文章主要介绍了使用 clip-path 绘制多种图形。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

clip-path 基本介绍

clip-path 是一个CSS属性,剪切路径,允许用不同的剪切方式创建元素的可显示区域,区域内的内容可以展示,区域外的内容则隐藏。
基本语法:clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none

其中,属性值分四类:

  • clip-source
    使用类函数 url() 引用 SVG<clipPath> 元素。
  • basic-shape
    一些基本形状,使用类函数形式创建一个形状,可取值包含:圆形(circle)、椭圆(ellipse)、多边形(polygon)、矩形(inset)、任意路径(path)。
  • geometry-box
    可选;此属性值必须与 basic-shape 属性值共同作用,为剪切形状提供参考盒子,默认值为 border-box
    该属性兼容性存在一定问题,在chrome浏览器下无法正常使用,慎用
  • none
    默认值 none,除此外,还有 inheritinitial等CSS全局值。

使用如下,

<div class="app"></div>
.app {
  display: inline-block; 
  position: relative; 
  width: 200px;
  height: 200px;
  background-color: #333;
  clip-path: circle(50%); 
}

以上代码,将给 .app 元素设置一个背景色为黑灰色的圆形的剪切区域:

clip-path,css,css,css3,前端

使用 clip-path 绘制图形

上面代码和图片,展示了一个圆形的形状,基于 clip-path 的形状属性值 basic-shape
接下来,首先我们先了解下 basic-shape 的各属性值函数的基本用法:

  • 圆形 circle()
    接受一个半径长度和圆心位置信息,剪切成圆形
  • 椭圆 ellipse()
    接受两个半径长度和圆心位置信息,剪切成椭圆
  • 多边形 polygon()
    接受一组顶点位置信息,剪切成多边形状
  • 矩形 inset()
    接受 top、right、bottom、left 四个方向的偏移值,还可以设置圆角,剪切成矩形
  • 任意路径 path()
    接受SVG路径字符串,剪切成不同形状

有了这几种基本的形状函数,我们就可以创建各种各样的图形。

实现一个三角形

使用多边形属性值 polygon 实现一个三角形,只需要设置三个坐标点参数,就可以很方便的创建一个三角形状了。

<div class="triangle"></div>
.triangle {
  display: inline-block; 
  position: relative; 
  width: 200px;
  height: 200px;
  background-color: #f00;      
  animation: triangle 8s linear infinite;
}
@keyframes triangle {
  0% {
    clip-path: polygon(100px 0px, 200px 200px, 0px 200px);
  }
  25% {
    clip-path: polygon(200px 100px, 0px 200px, 0px 0px);
  }
  50% {
    clip-path: polygon(100px 200px, 0px 0px, 200px 0px);
  }
  100% {
    clip-path: polygon(0px 100px, 200px 0px, 200px 200px);
  }
}

如上代码所示,实现了四个方向的三角形的动画效果,采取的是顺时针旋转四次,依次展示:

clip-path,css,css,css3,前端
以后如果代码要实现三角形角标,就可以使用它了。

除了 polygon 外,使用 path 属性值同样能够实现三角形,下面的代码就是实现了一个三角形:

clip-path: path("M100,0 L0,200 L200,200");

而想要使用 path 实现一个同样的圆形,也可以,代码如下所示:

clip-path: path("M 100 0 A 100 100 0 1 1 100 200 A 100 100 0 1 1 100 0");

实现一个箭头效果

同样是使用多边形属性值 polygon,设置好箭头所需要的坐标顶点数据,就能够简单的绘制一个箭头。

.arrow {
  display: inline-block; 
  position: relative; 
  width: 200px;
  height: 200px;
  background-color: #f00;
  clip-path: polygon(40% 0%, 40% 30%, 100% 30%, 100% 70%, 40% 70%, 40% 100%, 0% 50%);
}

以上CSS代码,polygon的顶点值使用的百分比的相对值,同样有效,绘制下图所示的箭头:

clip-path,css,css,css3,前端
使用 path 属性值实现箭头同样可以,以下CSS代码就是实现和上图一样的箭头形状:

clip-path: path("M 80 0 L 80 60 L 200 60 L 200 140 L 80 140 L 80 200 L 0 100");

要设置不同的方向,调整顶点坐标值即可。

实现一个 × 符号

使用 × 作为关闭按钮图标符号,也是我们常用的UI样式,也可以通过 clip-path 属性轻松实现该符号形状。

.triangle {
  display: inline-block; 
  position: relative; 
  width: 20px;
  height: 20px;
  background-color: #f00;      
  clip-path: polygon(10% 0%, 0% 10%, 40% 50%, 0% 90%, 10% 100%, 50% 60%, 90% 100%, 100% 90%, 60% 50%, 100% 10%, 90% 0%, 50% 40%);
}

仍然是通过多边形进行定义,只要沿着 × 的各个顶点,设置对应的位置信息,效果可见下图:

clip-path,css,css,css3,前端
下面是 path 的实现:

clip-path: path("M 2 0 L 0 2 L 8 10 L 0 18 L 2 20 L 10 12 L 18 20 L 20 18 L 12 10 L 20 2 L 18 0 L 10 8");

形状的实现,就先到这里,反正只要我们愿意花时间,总能通过 clip-path 创建想要的形状,下面我们看下其他的用法。

注意事项

阴影与边框

注意,使用 clip-path 定义形状时,并不会处理 border 边框和 box-shadow 阴影等属性,比如创建圆形时,与 border-radius 的差异就很明显。
下面我们分别实现两个圆形:

.circle {
  display: inline-block; 
  width: 200px;
  height: 200px;
  background-color: #ccc;
  border: 3px solid red;
  box-shadow: 0px 0px 10px #00f;
}
.circle1 {
  clip-path: circle(50%);
}
.circle2 {
  border-radius: 50%;
}

clip-path,css,css,css3,前端
从上图可以看到,
使用 border-radius 时边框阴影都跟随圆形显示完整;
而使用 clip-path 则完全不同,阴影并不展示,边框则也是剪切的方式展示4段。

fixed定位问题

在使用 clip-path 剪切父元素时,如果使用 fixed 定位的内部元素,在脱离了当前父元素的范围后,将无法显示。
同样使用上面的代码,我们在html中做一些改动:

<div class="circle circle1">
  <div class="text">clip-path</div>
</div>
<div class="circle circle2">
  <div class="text">border-radius</div>
</div>

定义文本字符串的css属性,使用 fixed 定位:

.text {
  position: fixed;
  top: 230px; 
}

得到的效果图如下所示,在 clip-path 剪切中将无法显示文本,而 border-radius 则完整显示文本。

clip-path,css,css,css3,前端

动效问题

上文的代码中,我们在三角形的实现中,已经使用了 animation 使用动画效果,表现正常,但需要注意:

  • 在一次 @keyframes 设置中,如果使用 clip-path 属性,则他的属性值应该使用同一个函数,即必须都使用 polygon
  • 不能一个时间段使用 polygon 另一个时间段使用 path,如果这样做,将没有动画效果。

即下面这种写法是不被允许的:

/** polygon 函数与 path 函数同在一个动效中使用,将不会有动画效果,只会生硬的切换 */
@keyframes triangle {
  0% {
    clip-path: polygon(100px 0px, 200px 200px, 0px 200px);
  }
  50% {
    clip-path: path("M 200 100 L 0 200 L 0 0");
  }
}

使用 transition 处理动效也会存在同样的问题,下面我们看一个具体的示例。

<img class="img" src="../css项目/animate.jpg"/>
.img {
  clip-path: circle(50%);
  transition: all 1s;
}
.img:hover {
  clip-path: circle(100%);
}

当我们在正常状态下使用 circle 剪切一个圆形以后,hover 状态下也使用该函数,则效果正常:

clip-path,css,css,css3,前端
但是,当我们在 hover 状态下使用 none 或其他函数时,则没有动效,直接切换:

.img:hover {
  clip-path: none;
}

clip-path,css,css,css3,前端
如上图所示,与前面正常动效相比,这次就是直接切换状态,没动画效果。

clip-path 的其他用法

使用 clip-path 属性除了可以创建不同的形状以外,还可以在其他方面使用,如作为图片裁剪框、隐藏页面元素等等。

图片裁剪框

图片裁剪的具体实现,之前博文已有介绍,当时的实现方式,就是使用 clip-path 属性来定义的图片裁剪框,并且使用在JavaScript中动态修改定位位置信息来实时修改裁剪框的尺寸和位置信息。
具体的代码,详见 一步步实现裁剪功能。

隐藏页面元素

根据上面的对 clip-path 属性的了解,我们知道在剪切形状区域内的内容是可见的,在剪切区域外的内容不可见。
如果我们把设置一个元素的剪切区域为0,则该元素的所有内容都将在区域外,即是不可见的,在实现上也非常简单。

clip-path: circle(0%);
clip-path: inset(50%);
clip-path: polygon(0 0);

使用不同的形状函数值,只要保证没有剪切区域就行。
当然,这种方式的隐藏,元素仍然会占据在页面上的当前空间,只是在视觉上看不见。文章来源地址https://www.toymoban.com/news/detail-791772.html

到了这里,关于使用 clip-path 绘制多种图形的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • opencv进阶02-在图像上绘制多种几何图形

    OpenCV 提供了方便的绘图功能,使用其中的绘图函数可以绘制直线、矩形、圆、椭圆等多种几何图形,还能在图像中的指定位置添加文字说明。 OpenCV 提供了绘制直线的函数 cv2.line()、绘制矩形的函数 cv2.rectangle()、绘制圆的函数cv2.circle()、绘制椭圆的函数cv2.ellipse()、绘制多边形

    2024年02月12日
    浏览(50)
  • CSS3绘制3D银行卡片层叠展示特效

    使用纯css3绘制3D银行卡层叠展示特效 具体示例如下 实现这个3D卡片,需要在最外层父级元素添加 transform: translate3d(0, 0, 0);transform-style: preserve-3d ,声明 3D ,结合 css3 中 transform 的变换,平移就可以实现 村民私自搭桥收费被判刑 2023-07-10 聊一下大学几年如何渡过 2023-07-09 聊一聊抑郁

    2024年02月16日
    浏览(49)
  • 儿童节快乐,基于CSS3绘制一个游乐场动效界面

    让代码创造童话,共建快乐世界。六一儿童节——这是属于孩子们的节日,也是属于我们大人的节日。让我们一起「致童真」,用代码(HTML+CSS+JS)创造出一个游乐场,让这个世界多一份快乐和惊喜! 一张图不用,纯代码制作👇 使用任意HTML编辑软件(如:Dreamweaver、HBuilde

    2024年02月07日
    浏览(50)
  • 软件测试|使用matplotlib绘制多种柱状图

    简介 在数据可视化领域,Matplotlib是一款强大的Python库,它可以用于创建多种类型的图表,包括柱状图。本文将介绍如何使用Matplotlib创建多种不同类型的柱状图,并提供示例代码。 创建基本柱状图 首先,让我们创建一个基本的柱状图,以可视化一组数据的比较。假设我们有

    2024年01月18日
    浏览(58)
  • 软件测试|使用matplotlib绘制多种折线图

    简介 在数据可视化领域,Matplotlib是一款非常强大的Python库,它可以用于绘制各种类型的图表,包括折线图。本文将介绍如何使用Matplotlib创建多种不同类型的折线图,并提供示例代码。 创建模版 在绘图之前,我们可以先创建我们的绘图模版,节省我们的时间,后续绘图只需

    2024年01月18日
    浏览(41)
  • css3 transtion属性的使用

    主要实现多个内容排列时从下到上过渡 或者 从左到右过渡。 思路:主要是利用flex布局的flex-direction属性和align-items属性。 flex-direction属性决定主轴的方向(即项目的排列方向) align-items属性定义项目在交叉轴上如何对齐。 一、从下到上过渡(方案1)  1.先上效果图 效果图

    2024年02月17日
    浏览(48)
  • 使用OpenCV绘制图形

    绘制黄色的线: 绘制矩形: 绘制圆形: 绘制多边形: 绘制文字:

    2024年01月22日
    浏览(50)
  • 使用MFC绘制一些简单图形

    目录 一、画直线 更改画笔样式 二、使用画刷画一个矩形 透明矩形 自定义颜色填充矩形 自定义图形填充矩形 四、实现一个画笔 五、画扇形 六、画椭圆 七、画圆 八、输出文本     画一条直线需要一个起点和一个终点,当鼠标按下时记录为起点坐标,鼠标弹起时记录为终点

    2024年02月07日
    浏览(51)
  • css3的filter图片滤镜使用

    默认:第一个图标为选中状态,其他三个图标事未选中状态 样式:选中状态是深蓝,未选中状体是浅蓝 交互:鼠标放上去选中,其他未选中,鼠标离开时候保持当前选中状态 实现:目前只有一下四个图标,需要用css3的滤镜实现  深度解读css中filter滤镜及在图片与边框改色方

    2024年02月15日
    浏览(55)
  • 使用css3如何实现一个文字打印效果

    在很多网站首页介绍页里,为了吸引用户,暂留更长时间,使用了一些css3动画的 文字打印.gif 想要实现这个动画,改变元素的宽度,结合动画css3关键帧实现 animation 动画通过设置多个节点来精确控制一个或者一组动画,常用来实现复杂的动画效果; 相对过渡动画, animation 动画可以

    2024年02月16日
    浏览(91)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包