- 综合排序
- 最热优先
- 最新优先
- 来自专栏用户7873631的专栏
clip-path
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{margin: 0;padding: 0;list-style: none;} #div { width: 0px;height: 0px;position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;border-left:100px solid rgba(0,0,0,0)
60310发布于 2020-10-28 - 来自专栏小狐狸说事
CSS Clip-path Maker
CSS Clip-path Maker ---- 网站介绍 可以生成具有各种不同形状的漂亮剪辑路径，非常方便。
94620编辑于 2022-11-17 - 来自专栏【全栈开发之路】
CSS clip-path 属性
✨ 基础概念 什么是 clip-path？ clip-path 是CSS中一个强大的属性，它允许开发人员和设计师通过定义一个剪切区域来控制元素的可视部分，隐藏元素轮廓之外的内容。 clip-path: polygon(0 20%, 100% 0, 100% 80%, 0 100%); } 鼠标移入前效果： 鼠标移入后效果： 以上实战案例展示了clip-path在图片处理 .element { clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%); transition: clip-path 0.5s ease clip-path: circle(50% at 50% 50%); } 100% { clip-path: polygon(100% 0%, 100% 100%, 0% 100% 响应式设计 为了适应不同设备和屏幕尺寸，可以利用CSS媒体查询动态调整clip-path的参数。
1.3K10编辑于 2024-06-14 - 来自专栏前端大合集
学习css的clip-path属性
前言 通过本文的学习,你将会学到 认识并学习css属性clip-path的一些用法 配合过渡和动画创建好玩的交互 Clip-path 认识 1. 用法 clip-path 的基本语法列表： 圆形（circle） clip-path: circle(radius at center); 示例： clip-path: circle(50px at 50% 50%); 椭圆形（ellipse） clip-path: ellipse(rx ry at cx cy); 示例： clip-path: ellipse(50% 50% at 50% 50%); 多边形 （polygon） clip-path: polygon(x1 y1, x2 y2, x3 y3, ...); 示例： clip-path: polygon(50% 0%, 100% 50%, 50% 10'); URL 引用（url） clip-path: url(#clipPathId); 示例： clip-path: url(#myClipPath); none（无剪切路径） clip-path
72610编辑于 2024-07-29 - 来自专栏大前端（横向跨端 & 纵向全栈）
CSS 3.0的clip-path滚动特效
charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>clip-path (bg.jpeg); background-size: 100%; background-attachment: fixed; clip-path
85020发布于 2020-11-26 - 来自专栏Coco的专栏
利用 clip-path 实现动态区域裁剪
，介绍了 CSS 中几种裁剪元素的方式，而其中，最适合利用在这个效果的，就是 -- clip-path。 利用 clip-path，可以非常好的实现，动态裁剪的功能，并且，代码也非常简单：
.g-container { position linear; clip-path: circle(20px at 44px 44px); background: #fff; &:hover { clip-path : circle(460px at 44px 44px); } } 我们只需要利用 clip-path，在最开始的时候，将一个矩形 div，利用 clip-path: circle(20px at zoom in animation 很有意思的一个技巧，利用 clip-path 实现动态区域裁剪，希望大家能够掌握。1.2K20编辑于 2021-12-17 - 来自专栏我分享我快乐
CSS3“蒙版(剪切路径)”: clip-path
<!doctype html> <html> <head> <script src="jquery.js"></script> <style> .box{width:400px;height:300px;position:relative;} .box img{width:100%;height:100%;} .mask{width:100%;height:100%;border:solid 5px red;box-sizing:border-box;position:absolute;top:0;le
991150发布于 2018-05-02 - 来自专栏农民工前端
CSS奇思妙想之-利用CSS裁剪（clip-path）完成各种图形
有的：css裁剪clip-path介绍css裁剪（clip-path）这个属性平时率非常低。但是其实clip并不是CSS3的新属性，很早就开始出现了。 而在CSS3中，提供了强大的clip-path属性，突破了clip属性的众多限制。clip-path能够让你指定一个网页元素的显示区域，而不是显示全部。 在过去有个等效的属性clip，但在新的CSS规范中，它已经被标志为deprecated，用新的clip-path代替。clip-path到底是什么？ clip-path属性 clip-path属性可以使用四种裁剪函数：circle()、ellipse()、inset()和polygon()。 如果使用clip-path，只需要一个盒子+circle（）。
2.4K21编辑于 2023-04-23 - 来自专栏埋名
CSS样式clip-path绘制图形裁剪图片
发现clip-path绘制图形的网站 http://bennettfeely.com/clippy/ 专门介绍clip-path的使用，几乎任何形状都可以做出来，下面使用clip-path制作正三边形至正八边形以及其它图形的方法 通过应用这些正多边形和其它的形状的实现方法来学习clip-path这个样式。 先看看兼容性： ? 看完兼容之后，你可确定是否在你的项目中应用这个clip-path样式，接下来用实例来学习一下这个样式。 图片裁剪 通过上面方法绘制图形，然后设置背景图片，即可达到裁剪图片的目的 ? div{ -webkit-clip-path: polygon(52% 7%, 19% 73%, 92% 61%); clip-path: polygon(52% 7%, 19% 73% 在线制作工具：http://bennettfeely.com/clippy/［★★★★★］ 查看兼容：http://caniuse.com/#search=clip-path
2K20发布于 2018-10-18 - 来自专栏FECoding
巧用 CSS3 中的 clip-path 绘制图形
本文则介绍了使用 CSS3 中提出的 clip-path 来解决该问题的方法。 clip-path，顾名思义，可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。 下面是绘制一个等边三角形的核心代码，只需一行： clip-path: polygon(50% 0%, 0% 100%, 100% 100%); 如果你对 clip-path 令人眼花缭乱的语法还有一定的抵触 ，这个网站 CSS clip-path maker 则将其使用成本降到了最低。 你只要傻瓜式地选择好各项配置，它就能帮你生成 clip-path 的代码。可以看到，clip-path 能够完成相当复杂的图形绘制。 唯一能制约 clip-path 放飞自我的可能就是兼容度了，截至本文写作时，浏览器对 clip-path 的支持程度如下： ? 看来只有在现代浏览器上才能谨慎使用 clip-path 了。
1.4K20发布于 2019-04-25 - 来自专栏农民工前端
CSS奇思妙想之-利用CSS裁剪（clip-path）完成各种图形
有的：css裁剪 clip-path介绍 css裁剪（clip-path）这个属性平时率非常低。但是其实clip并不是CSS3的新属性，很早就开始出现了。 而在CSS3中，提供了强大的clip-path属性，突破了clip属性的众多限制。 clip-path能够让你指定一个网页元素的显示区域，而不是显示全部。 在过去有个等效的属性clip，但在新的CSS规范中，它已经被标志为deprecated，用新的clip-path代替。 clip-path到底是什么？ clip-path属性 clip-path属性可以使用四种裁剪函数：circle()、ellipse()、inset()和polygon()。 如果使用clip-path，只需要一个盒子+circle（）。
1.1K20编辑于 2024-05-17 - 来自专栏MudOnTire
每天一个小技巧：CSS clip-path 的妙用 Clip Path分类Clippy
CSS 的 clip-path 属性是 clip 属性的升级版，它们的作用都是对元素进行 “剪裁”，不同的是 clip 只能作用于 position 为 absolute 和 fixed 的元素且剪裁区域只能是正方形 ，而 clip-path 更加强大，可以以任意形状去裁剪元素，且对元素的定位方式没有要求。 基于这样的特性，clip-path 常用于实现一些炫酷的动画效果。 比如： 视差广告效果： ? 实现请参考：CodePen 菜单栏弹出效果： ? : inset(0); &:active { clip-path: inset(100px 200px 10% 20% round 20px); } } ? : circle(100px at center); &:hover { clip-path: circle(50% at center); } } ?
8K41发布于 2020-07-22 - 来自专栏前端印象
【css炫酷动画】让面试官眼前一亮的故障风格文字动画
clip-path: inset(.3em 0 .6em 0); } 25% { clip-path: inset(.6em 0 .3em 0); } 30% { clip-path: inset(.8em 0 .5em 0); } 35% { clip-path: inset(1em 0 .1em 0 ); } 40% { clip-path: inset(.7em 0 .35em 0); } 45% { clip-path: inset clip-path: inset(.8em 0 .46em 0); } 70% { clip-path: inset(.66em 0 .33em 0); } 75% { clip-path: inset(.48em 0 .23em 0); } 80% { clip-path: inset(.23em
93110编辑于 2021-12-31 - 来自专栏鲸鱼动画
CSS小鲨鱼
absolute; top: 50px; left: 250px; background-color: #000000; width: 120px; height: 60px; clip-path absolute; top: 86px; left: 298px; background-color: #242424; width: 120px; height: 60px; clip-path : polygon(50% 100%, 100% 100%, 60% 0%, 20% 40%); } .polygon:nth-child(3) { clip-path: polygon(30% 100% left: 230px; background-color: white; width: 130px; height: 60px; } .polygon:nth-child(4) { clip-path left: 173px; background-color: #444444; width: 130px; height: 60px; } .polygon:nth-child(5) { clip-path
46020发布于 2020-09-21 - 来自专栏Coco的专栏
奇妙的 CSS shapes(CSS图形)
clip-path CSS 新属性 clip-path，意味裁剪路径的意思，让我们可以很便捷的生成各种几何图形。 clip-path 通过定义特殊的路径，实现我们想要的图形。 ); /* Box values clip-path: fill-box; clip-path: stroke-box; clip-path: view-box; clip-path: margin-box clip-path: border-box clip-path: padding-box clip-path: content-box /* Geometry values */ clip-path * Global values */ clip-path: inherit; clip-path: initial; clip-path: unset; } 看上去很多，其实很好理解，如果接触过 SVG clip-path 示例 下面分别列举使用 clip-path 生成一个圆形和一个十边形。
1.8K50发布于 2018-05-28 - 来自专栏各类技术文章~
TryShape 背后的故事，CSS 剪辑路径属性的展示
例如，要在坐标位置(70, 70)裁剪一个半径为 70px 的圆形，我们可以将clip-path属性值指定为： clip-path: circle(70px at 70px 70px) 因此，圆心位于( 例如： clip-path: inset(30px) 上面的clip-path值通过从元素的边缘去掉 30px 值来裁剪一个区域。我们可以在下图中看到。我们还可以为每条边指定不同的插入值。 我希望您已经了解不同的clip-path财产价值。有了这样的理解，让我们来看看一些实现并尝试使用它们。这是给你的钢笔。请使用它来尝试添加、修改值以创建新形状。 该Component是到指定clip-path的值，显示剪切区域。 ` value (formula) and set // to the `clip-path` property. const Component = styled.div` clip-path:
2.8K30发布于 2021-09-10 - 来自专栏前端印象
【css炫酷动画】让面试官眼前一亮的故障风格文字动画
clip-path: inset(.3em 0 .6em 0); } 25% { clip-path: inset(.6em 0 .3em 0); } 30% { clip-path: inset(.8em 0 .5em 0); } 35% { clip-path: inset(1em 0 .1em 0 ); } 40% { clip-path: inset(.7em 0 .35em 0); } 45% { clip-path: inset clip-path: inset(.8em 0 .46em 0); } 70% { clip-path: inset(.66em 0 .33em 0); } 75% { clip-path: inset(.48em 0 .23em 0); } 80% { clip-path: inset(.23em
92910发布于 2021-05-27 - 来自专栏Coco的专栏
如何不使用 overflow: hidden 实现 overflow: hidden
使用 clip-path，我们可以方便的控制任意方向上的裁剪。 非 overflow、clip-path 的裁剪方式 那么。通过上面的一个小例子，我们知道了 overflow，clip-path 可以裁剪区域。 想想今天说的 clip-path。 然后，利用 clip-path，把上下两部分裁掉即可。 其实对于裁剪矩形区域，clip-path 有更便捷的语法，上述 clip-path:polygon(0 50px, 100% 50px, 100% 250px, 0 250px) 可以替换成 clip-path
2.6K10发布于 2021-01-13 - 来自专栏张家辉的树屋
React&CSS3: 写一个 spinner 圆形加载动画
关键Key: react,css3 clip-path 先来看看需要实现的效果 ? 思路 需要先构建一个圆，然后做一个循环旋转的动画，然后在动画的过程中切割圆的部分环，达到上图的效果。 .); 切割环：clip-path：polygon(...) css3 clip path 这里我们来了解一下 clip-path 的使用方法，最开始这个属性是 clip 然后最近改用了 clip-path 使用方法 developer.mozilla.org/zh-CN/docs/… /* Geometry values */ clip-path: inset(100px 50px); clip-path : circle(50px at 0 100px); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); /* Box and geometry values combined */ clip-path: padding-box circle(50px at 0 100px); 一些 demo 预览 ?
1.1K20发布于 2021-02-02 - 来自专栏Coco的专栏
谈谈一些有趣的CSS题目（九）-- 巧妙的实现 CSS 斜线
Demo戳我:CSS斜线（伪元素+三角形实现） 法四、clip-path clip-path 是啥？可以算是 CSS3 的新增属性，或者准确来说是 SVG 的 <path> 的 CSS 版本。 使用 clip-path，我们可以定义任意想要的剪裁路径。 本文不深入探讨 clip-path ，可以先移步 MDN 或者其他关于 clip-path 讲解的文章学习一下。 使用 clip-path 的多边形规则 polygon，也可以轻松制作一个三角形（本题中，我们依然借助伪元素来使用clip-path）： ? 所以使用 clip-path 加上两个伪元素我们可以像 解法三 一样制作出斜线。 当然，我们也可以换一种方法，殊途同归，解法三也可以这样做，看看下面的效果图： ? Demo戳我:CSS斜线（clip-path） 所有题目汇总在我的 Github ，发到博客希望得到更多的交流。
1.6K40发布于 2018-05-28
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号