使用clip-path裁剪图形

基本内容

clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状。clip-path属性代替了现在已经弃用的剪切 clip属性。

常用属性值

clip-source ：用 URL 表示剪切元素的路径
basic-shape：将元素裁剪为基本形状：矩形（inset ）、圆形（circle）、椭圆（ellipse）、多边形（polygon）
margin-box：使用外边距框作为引用框，应该是从外边距开始裁剪
border-box：使用边框作为引用框，从边框开始裁剪
padding-box：使用内边距框作为引用框，从内边距开始裁剪
content-box：使用内容框作为引用框
none：默认设置，没有裁剪

备注： 有的浏览器可能不兼容，自己加一下浏览器标识

矩形

inset()可以传入5个参数，分别对应top,right,bottom,left的裁剪位置,round 可选，圆角）

 .juxing{width: 50px;height: 40px;background: red;clip-path: inset(25% 20% 25% 0% round 0 25% 0 25%);}

通过round关键字来指定圆角，顺序也是顺时针（上右下左）

圆形

circle(半径 at 圆心位置) ，半径支持百分比

 //圆形.yuanxing{width: 50px;height: 40px;background: red;clip-path: circle(30% at 25px 20px);}

椭圆

ellipse(x轴半径 y轴半径 at 圆心) 半径支持百分比

 //椭圆.tuoyuan{width: 50px;height: 40px;background: red;clip-path: ellipse(50% 30% at 25px 20px);}

多边形

polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
<fill-rule>可选，表示填充规则用来确定该多边形的内部。可能的值有nonzero和evenodd,默认值是nonzero.后面的每对参数表示多边形的顶点坐标（X,Y），也就是连接点
以矩形的左上角为例，左上角的点是(0% 0%) ，左下角的点是（0% 100%）通过设置点的位置来实现裁剪，不同点直接用逗号分隔
点的位置按照顺时针的顺序排列

平行四边形
之前做过平行四边形，用的是transform: skewX(45deg); ，现在也可以通过裁剪来实现

 .pxsbx{width: 50px;height: 40px;background: red;clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);}

直角三角形

//直角三角形
.zjsjx {width: 50px;height: 40px;background: red;clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
}

直角梯形

//直角梯形
.zjtx {width: 50px;height: 40px;background: red;clip-path: polygon(0% 0%, 40% 0%, 100% 100%, 0% 100%);border-top-left-radius: 20%;
}

通过border-radious 还可以添加上圆角，但是这种方式有局限，等以后找到方法再进行补充

其他多边形不介绍了，可以自己试一下。

结合css过度属性和动画属性

.outer{width:100px;height: 100px;background:orange;clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);transition:0.5s clip-path;
}
.outer:hover{clip-path:polygon(0 0,0 0,100% 0,100% 0,100% 100%,100% 100%,0 100%,0 100%);
}

使用clip-path裁剪图形相关推荐

Python批量裁剪图形外围空白区域-续
一.基本描述批量裁剪掉图片的背景区域,一般是白色背景,从而减少背景值的干扰和减少存储空间. 原文链接:Python批量裁剪图形外围空白区域原文是通过检索所有图片的最小裁剪区域坐标值,然后再对图片进 ...
怎样用CorelDRAW精确裁剪图形
精确裁剪是借助于图框精确裁剪按钮将一个图形置于另一个图文框内部,主要应用于打印等输出文本中,今天的CDR教程将详细介绍如何在CorelDRAW X7软件中精确裁剪图形. CorelDRAW X7软件中 ...
第4章第15节：如何利用裁剪图形制作探照灯滚动扫描效果 [SwiftUI快速入门到实战]
本节课将继续使用裁剪图形,制作探照灯滚动扫描的艺术效果. 首先添加一个布尔类型的属性,标识是否开始播放动画. 添加一个ZStack视图,作为子视图的容器.并通过图像视图,读取项目里的指定名称的图片. ...
Python批量裁剪图形外围空白区域
1.描述图形外围空白区域比较多,需要裁剪掉,这样的图形有很多,需要批量处理 2.代码 from PIL import Image import numpy as np import osimages ...
ArcGIS Clip（裁剪）时出现000117错误的解决办法
使用"裁剪(clip)"工具出现了"000117 警告: 生成的输出为空"拓扑无效 [空多边形不完整] 原因和解决办法: 拓扑无效 [空多边形不完整]错误: 原 ...
ppt学习(1):ppt插入圆形、等边形，ppt裁剪图形
1 ppt插入的圆形状不够圆问题选择:插入--形状--圆形鼠标回到ppt正文页面,按住shift键,拖拽即可画出非常圆的圆其他等比例的正三角形.正方形可同样参考绘制 2 ppt裁剪功能插入主图 ...
利用图层的mask属性裁剪图形
需求如上图. 代码如下 //充值UIButton *rechargeButton = [[UIButton alloc] initWithFrame:CGRectMake(20, 10, 80, 30 ...
html5 clip,canvas中使用clip()函数裁剪方法
未使用裁剪绘制一个圆 *{margin:0;padding:0;} html,body{width:100%;height:100%;overflow:hidden;background-color: ...
【转载】CSS3之Clip（裁剪）拓展阅读
Clip属性是大家经常会误解的一个属性,这篇文章帮助大家充分的了解和学习clip属性,用这个属性制作出更好的效果. 我可以确定Clip属性有很多同学并不知道,因为这个属性使用率非常的底,我初次接触是在 ...

使用clip-path裁剪图形

推荐（参考文章）

基本内容

矩形

圆形

椭圆

多边形

结合css过度属性和动画属性

使用clip-path裁剪图形相关推荐

最新文章

热门文章