css的clip-path学习


参考博文

clip-path的几个值

自己学习后,先把clip-path理解为在原图上绘制轮廓,显示的内容是轮廓内的内容,就比较好理解展示的结果

比如原图是一个红色的正方形,样式如下:

.box{
	width: 200rpx;
	height: 200rpx;
	background-color: red;
}

在这里插入图片描述

polygon多边形

首先要有一个概念:原图的左上角坐标是(0,0),右下角坐标是(100%,100%),后面的值都是在这个基础上设置的

如果设置多边形轮廓,就是要设置顶点,比如

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

效果如下:

在这里插入图片描述
由此知道,设置的三个点,第一个是【x轴的50%,y轴的0%处】,第二个是【x轴和y轴的100%,也就是原图的右下角】,第三个是【x轴的0%,y轴的100%处,也就是原图的左下角】

circle圆形

理解了多边形,圆形就好理解了

比如设置半径为50%的圆形

clip-path: circle(50%);

在这里插入图片描述
还可以指定圆心,默认的是原图的中心

clip-path: circle(30% at 20% 20%);

效果如下:
在这里插入图片描述
半径为30%,圆心在于原图的【x轴的20%,y轴的20%处】。

ellipse椭圆形

椭圆形与圆形区别,可以设置x轴半径和y轴半径,比如

clip-path: ellipse(20% 50% at 50% 50%);

效果如下:
在这里插入图片描述
x轴半径为x轴的20%,y轴半径为y轴的50%,圆心在于原图的【x轴的50%,y轴的50%处】。

inset 矩形

矩形是设置偏移位置,还可以设置圆角,
注意:偏移位置是指从哪个位置开始做剪切!!!

比如:

clip-path: inset(70% 0% 0% 0% round 25%)

效果如下:
在这里插入图片描述
偏移的4个值,分别对应的是从上到下,从右到左,从下到上,从左到右的值。意思就是从原图的y轴从上到下方向,偏移70%开始剪切,其他的不变

round后面是四个角的度数

四个值的话,就是左上,右上,右下,左下的圆角度数

一个简单的应用,比如画一段曲线

.box{
	width: 200rpx;
	height: 200rpx;
	background-color: transparent;
	border-bottom: 2rpx solid;
	border-right: 2rpx solid;
	border-bottom-right-radius: 50%;
	clip-path: inset(70% 0% 0% 30% round 25%)
}

效果如下:
在这里插入图片描述
其实就是带border的view,然后剪切了一部分

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值