css3的clip-path方法剪裁实现

时间:2021-08-08 04:00:44

本例讲解如何通过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方法剪裁实现的更多相关文章

  1. CLIP PATH &lpar;MASK&rpar; GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板。

    CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板. CLIP PATH (MASK) GENERATO ...

  2. 判断浏览器是否支持某个css3属性的javascript方法

    判断浏览器是否支持css3某个属性的方法: /** * 判断浏览器是否支持某一个CSS3属性 * @param {String} 属性名称 * @return {Boolean} true/false ...

  3. CSS clip&colon;rect矩形剪裁功能及一些应用介绍

    CSS clip:rect矩形剪裁功能及一些应用介绍 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.co ...

  4. CSS clip&colon;rect矩形剪裁功能及应用

    .clip{ position:absolute; clip: rect(10px 30px 20px 10px); } 最后有必要说明下:clip:rect矩形剪裁只能作用于position:abs ...

  5. Django2&period;0的path方法无法使用正则表达式的解决办法

    本人的django的版本是2.0.6 在django项目中,在urls.py文件中,匹配路由用的path方法,之前我用的都是url方法 写了一个path方法,使用正则表达式 from django.c ...

  6. css中clip&colon;rect矩形剪裁功能

    一.示例 img { position:absolute; clip:rect(30px,200px,200px,20px); } 二.理解 clip 属性剪裁绝对定位元素. clip:rect矩形剪 ...

  7. clip&colon;rect矩形剪裁

    clip:rect(top right bottom left);依据上-右-下-左的顺序提供自图片左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用auto替换. 矩形剪裁 还需要绝对定位 ...

  8. 让IE浏览器支持CSS3圆角属性的方法

    绘出圆角: 1.下载一个压缩包,里面有一个微软的脚本文件(11KB)和一个用来测试服务器是否有正确的Content-Type的HTML文件:iecss3.rar:.htc 文件是IE内核支持Web行为 ...

  9. css3中clip属性

    clip 属性用来设置元素的形状.用来剪裁绝对定位元素. 当一幅图像的尺寸大于包含它的元素时,"clip" 属性允许规定一个元素的可见尺寸,这样此元素就会被修剪并显示在这个元素中. ...

随机推荐

  1. 字母排序问题(c&plus;&plus;实现)

    描述:编写一个程序,当输入不超过60个字符组成的英文文字时,计算机将这个句子中的字母按英文字典字母顺序重新排列,排列后的单词的长度要与原始句子中的长度 相同.例如: 输入: THE PRICE OFB ...

  2. Activity学习(五)——Bundle机制

    上一篇文章我简单介绍了Activity之间简单切换,很简单,这一篇文章我们继续聊Android中程序页面互相跳转的Activity,不过这一次我们在Activity跳转时,携带一些简单的数据,然后在新 ...

  3. python学习小结5:封装、继承、多态

    面向对象程序设计中的类有三大特性: 继承,封装,多态 继承:以普通的类为基础建立专门的类对象 封装:对外部世界隐藏对象的工作细节 多态:可对不同类的对象使用同样的操作 在Python中类的继承定义基本 ...

  4. tomcat部署war包时连接被重置&lpar;修改tomcat上传限制&rpar;

    相对目录:apache-tomcat-7.0.67/webapps/manager/WEB-INF/web.xml 500M的计算:500*1024*1024 <multipart-config ...

  5. Python——Flask框架——程序的结构

    一.项目结构 |-flasky |-app Flask程序一般都保存在这里 |-templates/ |-static/ |main/ |-__init__.py |-errors.py |-form ...

  6. Mysql双主热备&plus;LVS&plus;Keepalived高可用部署实施手册

    MySQL复制能够保证数据的冗余的同时可以做读写分离来分担系统压力,如果是主主复制还可以很好的避免主节点的单点故障.然而MySQL主主复制存在一些问题无法满足我们的实际需要:未提供统一访问入口来实现负 ...

  7. LR基本知识学习

    性能测试基础 本质:基于 协议 模拟用户发请求,对服务器形成一定的负载,来测试服务器的性能指标是否满足要求,与界面无关 * 时间 * 空间 分类: 性能(狭义):特定条件下,验证  系统是否有宣称具有 ...

  8. windows 文件夹下所有文件名称

    dir dir /b 没有其它信息 dir /b >>xxx.txt 保存到txt

  9. Manjaro Linux 配置nfs服务器

    NFS客户端和NFS服务端通讯过程 1.首先服务器端启动RPC服务,并开启111端口 2.服务器端启动NFS服务,并向RPC注册端口信息 3.客户端启动RPC(portmap服务),向服务端的RPC请 ...

  10. Qt线程外使用Sleep

    一:方法1 QTime t; t.start(); while(t.elapsed()<1000){     QCoreApplication::processEvents();} 二:方法2 ...