本例讲解如何通过clip-path把一个div(元素,可以是图片等)裁切成不同的形状,这里以一个div为例宽高均为300px
注意:不支持IE和Firefox,支持webkit浏览器,在现代浏览器中需要使用-webkit-前缀。
<div class="demo" style="width: 300px; height: 300px; margin: auto; background: red;">
</div>
1.裁切为一个三角形或者梯形 使用:polygon裁剪多边形。
.demo{
-webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
剪切梯形:坐标顺序为,右上、右下,左下,左上
.demo{
-webkit-clip-path: polygon(100% 0,75% 100%, 25% 100%, 0 0);
}
2.裁切圆 :创建圆形,需要给circle传入三个值:半径和圆心坐标(x y),用at关键字来定义圆心坐标。
.demo{
-webkit-clip-path: circle(50% at 50% 50%);
}
3.裁切椭圆:创建椭圆,需要给ellipse传入四个值:椭圆的x轴半径、y轴半径以及椭圆圆心(x y)。
.demo{
-webkit-clip-path: ellipse(30% 20% at 50% 50%);
}
4.再说下裁切的:矩形裁切,边缘裁切用到的 inset(对应的是距上,距右,距下,距左的位置)
.demo{
-webkit-clip-path: inset(100px 50px 50px 50px);
}
小实例:裁切一个圆角 inset(<top> <right> <bottom> <left> round <top-radius> <right-radius><bottom-radius> <left-radius>)
-webkit-clip-path: inset(25% 0 round 0 25%);
---------------------
作者:yufengaotian
来源:CSDN
原文:https://blog.csdn.net/yufengaotian/article/details/80594461
版权声明:本文为博主原创文章,转载请附上博文链接!
css3的clip-path方法剪裁实现的更多相关文章
-
CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板。
CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板. CLIP PATH (MASK) GENERATO ...
-
判断浏览器是否支持某个css3属性的javascript方法
判断浏览器是否支持css3某个属性的方法: /** * 判断浏览器是否支持某一个CSS3属性 * @param {String} 属性名称 * @return {Boolean} true/false ...
-
CSS clip:rect矩形剪裁功能及一些应用介绍
CSS clip:rect矩形剪裁功能及一些应用介绍 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.co ...
-
CSS clip:rect矩形剪裁功能及应用
.clip{ position:absolute; clip: rect(10px 30px 20px 10px); } 最后有必要说明下:clip:rect矩形剪裁只能作用于position:abs ...
-
Django2.0的path方法无法使用正则表达式的解决办法
本人的django的版本是2.0.6 在django项目中,在urls.py文件中,匹配路由用的path方法,之前我用的都是url方法 写了一个path方法,使用正则表达式 from django.c ...
-
css中clip:rect矩形剪裁功能
一.示例 img { position:absolute; clip:rect(30px,200px,200px,20px); } 二.理解 clip 属性剪裁绝对定位元素. clip:rect矩形剪 ...
-
clip:rect矩形剪裁
clip:rect(top right bottom left);依据上-右-下-左的顺序提供自图片左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用auto替换. 矩形剪裁 还需要绝对定位 ...
-
让IE浏览器支持CSS3圆角属性的方法
绘出圆角: 1.下载一个压缩包,里面有一个微软的脚本文件(11KB)和一个用来测试服务器是否有正确的Content-Type的HTML文件:iecss3.rar:.htc 文件是IE内核支持Web行为 ...
-
css3中clip属性
clip 属性用来设置元素的形状.用来剪裁绝对定位元素. 当一幅图像的尺寸大于包含它的元素时,"clip" 属性允许规定一个元素的可见尺寸,这样此元素就会被修剪并显示在这个元素中. ...
随机推荐
-
字母排序问题(c++实现)
描述:编写一个程序,当输入不超过60个字符组成的英文文字时,计算机将这个句子中的字母按英文字典字母顺序重新排列,排列后的单词的长度要与原始句子中的长度 相同.例如: 输入: THE PRICE OFB ...
-
Activity学习(五)——Bundle机制
上一篇文章我简单介绍了Activity之间简单切换,很简单,这一篇文章我们继续聊Android中程序页面互相跳转的Activity,不过这一次我们在Activity跳转时,携带一些简单的数据,然后在新 ...
-
python学习小结5:封装、继承、多态
面向对象程序设计中的类有三大特性: 继承,封装,多态 继承:以普通的类为基础建立专门的类对象 封装:对外部世界隐藏对象的工作细节 多态:可对不同类的对象使用同样的操作 在Python中类的继承定义基本 ...
-
tomcat部署war包时连接被重置(修改tomcat上传限制)
相对目录:apache-tomcat-7.0.67/webapps/manager/WEB-INF/web.xml 500M的计算:500*1024*1024 <multipart-config ...
-
Python——Flask框架——程序的结构
一.项目结构 |-flasky |-app Flask程序一般都保存在这里 |-templates/ |-static/ |main/ |-__init__.py |-errors.py |-form ...
-
Mysql双主热备+LVS+Keepalived高可用部署实施手册
MySQL复制能够保证数据的冗余的同时可以做读写分离来分担系统压力,如果是主主复制还可以很好的避免主节点的单点故障.然而MySQL主主复制存在一些问题无法满足我们的实际需要:未提供统一访问入口来实现负 ...
-
LR基本知识学习
性能测试基础 本质:基于 协议 模拟用户发请求,对服务器形成一定的负载,来测试服务器的性能指标是否满足要求,与界面无关 * 时间 * 空间 分类: 性能(狭义):特定条件下,验证 系统是否有宣称具有 ...
-
windows 文件夹下所有文件名称
dir dir /b 没有其它信息 dir /b >>xxx.txt 保存到txt
-
Manjaro Linux 配置nfs服务器
NFS客户端和NFS服务端通讯过程 1.首先服务器端启动RPC服务,并开启111端口 2.服务器端启动NFS服务,并向RPC注册端口信息 3.客户端启动RPC(portmap服务),向服务端的RPC请 ...
-
Qt线程外使用Sleep
一:方法1 QTime t; t.start(); while(t.elapsed()<1000){ QCoreApplication::processEvents();} 二:方法2 ...