Qui-Note官网Logo
导航:Qui-Note/clip-path

clip-path

<style type="text/css">
	.box2,.box2 img{width: 400px;height: 400px;position: relative;}
	.box2 img{object-fit: cover;}
	.circle img{
clip-path: circle(50%);
	}
	.inset img{
clip-path: inset(100px 100px)
	}
	.inset1 img{
clip-path: inset(100px 100px round 10px)
	}
	.ellipse img{
clip-path: ellipse(45% 30% at 50% 50%);
	}
	.polygon img{
clip-path:  polygon(50% 0,100% 50%,0 100%);
	}
	.polygon1 img{
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	}
	.polygon2 img{
clip-path: polygon(0% 0%, 0% 200px,200px 200px,200px 0%);
	}
	.polygon3 img{
clip-path: polygon(0% 38.31%, 50% 0%,100% 38.31%,80.86% 100%,19.14% 100%);
	}
	.polygon4 img{
clip-path:polygon(25% 0%, 75% 0%,100% 50%,75% 100%,25% 100%,0% 50%)
	}
</style>
<p>矩形 clip-path: inset(100px 50px)</p>
<div class="box2 inset">
	<img src="../img/4.jpg"/>
</div>
 <p>圆角矩形 clip-path: inset(100px 50px round 10px)</p>
<div class="box2 inset1">
	<img src="../img/4.jpg"/>
</div>
<p>圆 clip-path:circle(50%)</p>
<div class="box2 circle">
	<img src="../img/4.jpg"/>
</div>
<p>椭圆 clip-path:ellipse(45% 30% at 50% 50%)</p>
<div class="box2 ellipse">
	<img src="../img/4.jpg"/>
</div>
<p>多边形:三角形 polygon(50% 0,100% 50%,0 100%)</p>
<div class="box2 polygon">
	<img src="../img/4.jpg"/>
</div>
<p>多边形:菱形  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);</p>
<div class="box2 polygon1">
	<img src="../img/4.jpg"/>
</div>
<p>多边形:正方形  clip-path: polygon(0% 0%, 0% 100%,100% 100%,100% 0%)</p>
<div class="box2 polygon2">
	<img src="../img/4.jpg"/>
</div>
<p>多边形:正五边形  clip-path: polygon(0% 38.31%, 50% 0%,100% 38.31%,80.86% 100%,19.14% 100%)</p>
<div class="box2 polygon3">
	<img src="../img/4.jpg"/>
</div>
<p>多边形:正六边形  polygon(25% 0%, 75% 0%,100% 50%,75% 100%,25% 100%,0% 50%)</p>
<div class="box2 polygon4">
	<img src="../img/4.jpg"/>
</div>

效果展示:

矩形 clip-path: inset(100px 50px)

圆角矩形 clip-path: inset(100px 50px round 10px)

圆 clip-path:circle(50%)

椭圆 clip-path:ellipse(45% 30% at 50% 50%)

多边形:三角形 polygon(50% 0,100% 50%,0 100%)

多边形:菱形 clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

多边形:正方形 clip-path: polygon(0% 0%, 0% 100%,100% 100%,100% 0%)

多边形:正五边形 clip-path: polygon(0% 38.31%, 50% 0%,100% 38.31%,80.86% 100%,19.14% 100%)

多边形:正六边形 polygon(25% 0%, 75% 0%,100% 50%,75% 100%,25% 100%,0% 50%)

X
馊稀饭 赞助了 陈小知 9.99
太阳 赞助了 陈小知 18.8
fonhen 赞助了 陈小知 8.76
admin 赞助了 陈小知 6.90
Tiger 赞助了 陈小知 9.90
cznq1106 赞助了 陈小知 9.90
459977099 赞助了 陈小知 9.90
2910224190 赞助了 陈小知 9.90