css3的clip-path方法剪裁实现(三角形,多边形,圆,椭圆)

本例讲解如何通过clip-path把一个div(元素,可以是图片等)裁切成不同的形状,这里以一个div为例宽高均为300px

注意:不支持IE和Firefox,支持webkit浏览器,在现代浏览器中需要使用-webkit-前缀。

1.裁切为一个三角形或者梯形 使用:polygon裁剪多边形。

.demo{
				-webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);
			}

css3的clip-path方法剪裁实现(三角形,多边形,圆,椭圆)_第1张图片

剪切梯形:坐标顺序为,右上、右下,左下,左上

.demo{
				-webkit-clip-path: polygon(100% 0,75% 100%, 25% 100%, 0 0);
			}

css3的clip-path方法剪裁实现(三角形,多边形,圆,椭圆)_第2张图片

2.裁切圆 :创建圆形,需要给circle传入三个值:半径和圆心坐标(x y),用at关键字来定义圆心坐标。

.demo{
				-webkit-clip-path: circle(50% at 50% 50%);
			}

css3的clip-path方法剪裁实现(三角形,多边形,圆,椭圆)_第3张图片

3.裁切椭圆:创建椭圆,需要给ellipse传入四个值:椭圆的x轴半径、y轴半径以及椭圆圆心(x y)。

.demo{
				-webkit-clip-path: ellipse(30% 20% at 50% 50%);
			}

css3的clip-path方法剪裁实现(三角形,多边形,圆,椭圆)_第4张图片

4.再说下裁切的:矩形裁切,边缘裁切用到的 inset(对应的是距上,距右,距下,距左的位置)

.demo{
				-webkit-clip-path: inset(100px 50px 50px 50px);
			}

css3的clip-path方法剪裁实现(三角形,多边形,圆,椭圆)_第5张图片

小实例:裁切一个圆角 inset(<top>    round <top-radius> <right-radius><bottom-radius> <left-radius>)

-webkit-clip-path: inset(25% 0 round 0 25%);

css3的clip-path方法剪裁实现(三角形,多边形,圆,椭圆)_第6张图片









你可能感兴趣的:(CSS,css3,裁切)