CSS不规则图形画法（clip-path）

clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。

1.基本语法


.element {clip-path: polygon(x1 y1, x2 y2, x3 y3, ...);
}

2.跨浏览器的写法


.element {-webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 80% 100%);clip-path: polygon(0 100%, 0 0, 100% 0, 80% 100%);-webkit-clip-path: url("#clip-shape"); /* 在Webkit或Blink浏览器中需要添加，如果你只使用内联SVGclipping path，而不是CSS clip-path的话 */ clip-path: url("#clip-shape");

语法详解:

基本图形：inset

inset() : 定义一个矩形。注意，定义矩形不是rect，而是 inset。

//语法
inset( <length-percentage>{1,4} [ round <border-radius> ]? )
//说明
inset()可以传入5个参数，分别对应top,right,bottom,left的裁剪位置,round radius（可选，圆角）//示例
clip-path: inset(2em 3em 2em 1em round 2em);

基本图形：circle

circle（）:定义一个圆

//语法
circle( [ <shape-radius> ]? [ at <position> ]? )
//说明
circle()可以传入2个可选参数；
1. 圆的半径，默认元素宽高中短的那个为直径，支持百分比
2. 圆心位置，默认为元素中心点
//示例
clip-path: circle(30% at 50% 50%);

基本图形：ellipse

ellipse（）：定义一个椭圆

//语法
ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
//说明
ellipse()可以传人3个可选参数；
1. 椭圆的X轴半径，默认是宽度的一半，支持百分比
2. 椭圆的Y轴半径，默认是高度的一半，支持百分比
3. 椭圆中心位置，默认是元素的中心点//示例
clip-path: ellipse(45% 30% at 50% 50%);

基本图形：polygon

polygon（）：定义一个多边形

//语法
polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
//说明
<fill-rule>可选，表示填充规则用来确定该多边形的内部。可能的值有nonzero和evenodd,默认值是nonzero
后面的每对参数表示多边形的顶点坐标（X,Y），也就是连接点//示例
clip-path: polygon(50% 0,100% 50%,0 100%);

三角形

-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

菱形

-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

五边形

-webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);

星星

-webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

CSS不规则图形画法（clip-path）相关推荐

不规则裁剪图片css,使用CSS的clip-path属性实现不规则图形的显示
clip-path CSS 属性使用裁剪方式创建元素的可显示区域.区域内的部分显示,区域外的隐藏. 例子 div { width: 200px; height: 200px; background: ...
css绘制不规则图形
CSS绘制不规则图形在实际开发中,经常会遇到绘制图形(图标)的需求,比如:箭头图表.不规则图形.规则图形: 常见方法对于图形的实现,可以大体上分为几种做法 (1) 背景图片,请UI小姐姐帮你吧-- ...
使用CSS 3创建不规则图形
2019独角兽企业重金招聘Python工程师标准>>> 前言 CSS 创建复杂图形的技术即将会被广泛支持,并且应用到实际项目中.本篇文章的目的是为大家开启它的冰山一角.我希望这篇文章 ...
Fabricjs在Canvas上使用路径Path绘制不规则图形
场景 Fabricjs在Canvas上插入照片并设置缩小和翻转属性: Fabricjs在Canvas上插入照片并设置缩小和翻转属性_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的 ...
css 对话框阴影,科技常识：css实现不规则图形的阴影（如对话框）
今天小编跟大家讲解下有关css实现不规则图形的阴影(如对话框) ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关css实现不规则图形的阴影(如对话框) 的相关资料,希望小伙伴们看了有所帮助. ...
css之-各种基本图形画法总结（css3.0）
css之-各种基本图形画法总结(css3.0) 基本设置:width 和 height 1.正方形,矩形用border话三角形边角用transform:skew(x angle,y angle): ...
javascript实现仿苹果电脑窗口最小化效果、css实现不规则图形的div
今天值班,继续分享个没用的技术,最近一个微信闲聊群的网友问能不能用div实现类似于苹果电脑窗口最小化的动画效果(窗口边框变得向内弯曲同时快速缩小直至消失),大概想了下,如果要完全还原,要用canvas ...
html中如何写不规则图形,CSS写三角形、五角形等不规则图形
写页面的时候时长遇到一些奇怪图形,用css是可以实现各种不规则图形的,下面举例几个常用的: 一.三角形利用border-color支持transparent这一特性,隐藏三条边框,实现三角形. .t ...
CSS实现不规则图形的立体效果
无立体效果立体效果实现方式 box-shadow是实现矩形图形立体化的常用方法,text-shadow可实现文字的立体化,但对于其他不规则图形的立体化,上述方法就爱莫能助了.对此,filter展示 ...

CSS不规则图形画法（clip-path）

语法详解:

基本图形：inset

基本图形：circle

基本图形：ellipse

基本图形：polygon

三角形

菱形

五边形

星星

CSS不规则图形画法（clip-path）相关推荐

最新文章

热门文章