css属性clip-path的使用说明

前言

当ui设计上的图片、div等的形状不是长方形,而是多边形的时候,就可以借助clip-path这个css属性来实现。

clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。【from: MDN】

clip-path可以理解为一把剪刀,将图片、div等剪裁成我们所希望的形状。下面,将着重介绍下clip-path的三个函数,分别是polygon()、circle()、ellipse()

polygon()

假设我们想把图片剪裁成如下图所示的形状。首先,以图片的左上角为坐标轴的顶点,在此处x、y值都为0%, 即为(0%, 0%)。然后我们从灰色点开始,顺时针开始剪裁。

  • 灰色:在y轴上,所以x为0;距离y轴顶点大约25%图片高度的位置。即 (0, 25%)

  • 橙色:距离x轴顶点大约50%图片宽度的位置,所以x是50%;在x轴上,所以y是0。即(50%, 0)

  • 绿色:距离x轴顶点100%图片宽度的位置,所以x是100%;距离y轴顶点大约25%的图片高度的位置,所以y是25%。即(100%, 25%)

  • … 后面的以此类推

最终结果是clip-path: polygon(0% 25%, 50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%);,这样,我们就得到了六边形的图片。
在这里插入图片描述
由此,我们得出结论,polygon函数里的每一个数据对,都是每一个点,相对于左上顶点的位置坐标。

circle()

如下图,将图片剪裁成一个中心点自定义,半径自定义的圆。先来看看最终结果clip-path: circle(50% at 50% 50%);,然后来看看每个数值的具体含义。

  • 50%:是指剪裁的圆的半径大小;
  • 50% 50%:是指剪裁的圆的中心位置(同样地,也是相对于坐上顶点的位置坐标)。
    在这里插入图片描述

ellipse()

如下图,将图片剪裁成一个中心点自定义,横向、竖向半径自定义的椭圆。还是先看看最终结果clip-path: ellipse(25% 40% at 50% 50%);,再看每个数值的含义。

  • 25%:横向半径;
  • 40%:竖向半径;
  • 50% 50%:椭圆的中心位置。
    在这里插入图片描述

结语

关于clip-path的介绍就到这里,如果觉得自己去写太麻烦的话,网上也有一个工具,仅供参考。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/120372.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

decapoda-research/llama-7b-hf 的踩坑记录

使用transformers加载decapoda-research/llama-7b-hf的踩坑记录。 ValueError: Tokenizer class LLaMATokenizer does not exist or is not currently imported. 解决办法: https://github.com/huggingface/transformers/issues/22222 将tokenizer_config.json中LLa…

Spring Cloud学习:二【详细】

目录 Nacos的配置 Nacos的单机启动 服务注册 Nacos服务分级存储模型 优先访问同集群的服务 根据权重负载均衡 环境隔离Namespace Nacos调用流程 Nacos与Eureka注册对比 Nacos与Eureka的共同点 Nacos与Eureka的区别 Nacos配置管理 统一配置 配置自动刷新 多环境配…

javascript中的继承

基本术语 本文中,proto [[Prototype]] 原型链 基本思想: 构造函数生成的对象有一个指针(proto)指向构造函数的原型。如果将构造函数1的原型指向另一个构造函数2的实例,则构造函数1的实例__proto__.proto 指向了构…

线性表——设计一个高效算法,将顺序表L的所有元素逆置,要求算法的空间复杂度为O(1)。

题目&#xff1a;设计一个高效算法&#xff0c;将顺序表L的所有元素逆置&#xff0c;要求算法的空间复杂度为O(1)。 算法思想&#xff1a;扫描顺序表的L的前半部分元素&#xff0c;对于元素L.data[i](0<i<L.length/2)&#xff0c;将其与后半部分的对应元素L.data[L.lengt…

python自动化测试平台开发:自动化测试平台简介

一.测试平台简介 为什么需要测试平台 已有的开源测试平台不能满足需要&#xff0c;不要轻易造轮子 需要公司级别的定制 需要整合公司内部的多套平台 例子&#xff1a;DevOps平台、精准化测试平台、质量监控平台等等 常见的测试平台开发模式 大一统模式&#xff08;适合简单的…

linux find命令搜索日志内容

linux find命令搜索日志内容 查询服务器log日志 find /opt/logs/ -name "filename.log" | xargs grep -a "这里是要查询的字符"加上-a 是为了不报查出 binary 的错 服务器会返回 包含所查字符的整行日志信息

从瀑布模式到水母模式:ChatGPT如何赋能软件研发全流程【文末送书五本】

从瀑布模式到水母模式&#xff1a;ChatGPT如何赋能软件研发全流程 前言内容简介购买链接作者简介专家推荐读者对象参与方式往期赠书回 &#x1f3d8;️&#x1f3d8;️个人简介&#xff1a;以山河作礼。 &#x1f396;️&#x1f396;️:Python领域新星创作者&#xff0c;CSDN实…

【C】关于动态内存的试题及解析

目录 第1题&#xff1a; 第2题&#xff1a; 第3题&#xff1a; 第4题&#xff1a; 第5题&#xff1a; 在学习了关于动态开辟内存的相关知识后&#xff0c;下面是一些涉及到动态开辟内存程序的试题及解析&#xff08;试题部分来自《高质量的C/C编程》、笔试题&#xff09;。 第1…

(1)(1.9) HC-SR04声纳

文章目录 前言 1 连接到自动驾驶仪 2 参数说明 前言 HC-SR04 声纳是一种价格低廉但量程很短&#xff08;最远只有 2m&#xff09;的测距仪&#xff0c;主要设计用于室内&#xff0c;但也成功地在室外的 Copter 上使用过。极短的测距范围使其用途有限。 &#xff01;Warning…

移远通信5G RedCap模组拿下首个中国移动5G物联网开放实验室5G及轻量化产品能力认证

10月21日&#xff0c;在2023世界物联网博览会期间&#xff0c;中国移动举办了以“智融万物 创见未来”为主题的物联网开发者大会暨物联网产业论坛。作为中国移动在物联网领域重要的合作伙伴&#xff0c;移远通信应邀参加论坛。 随着千行百业数智化进程的不断加速&#xff0c;5G…

酷开科技依托酷开系统推动家庭智能化加速发展

为什么越来越多的人会选择智能家居&#xff1f;因为智能家居的出现&#xff0c;大大方便了我们的生活&#xff0c;为生活提供便利舒适的体验&#xff1b;就如同洗衣机与洗碗机解放了我们的双手是一样的道理&#xff0c;智能家居是在生活的方方面面为我们提供更加便利化的可能性…

java代码审计-换行符CRLF注入

CRLF 的缩写是指回车和换行操作&#xff0c;其中 CR 为 ASCII 中的第 13 个字符&#xff0c;也 写作 \r , LF 是 ASCII 中的第 10 个字符&#xff0c;也写作 \n &#xff0c;因此 CRLF 一般翻译为回车换行注入漏洞。 什么是CRLF注入漏洞? CRLF 即【回车\r换行\n】的简…

找游戏外包开发游戏,有哪些好处呢?

游戏外包开发是将游戏开发的一部分或全部工作交给专业的外部开发团队或公司完成的做法。这种方法有许多潜在的好处&#xff0c;包括&#xff1a; 降低成本&#xff1a;游戏外包通常可以降低游戏开发成本&#xff0c;因为外包开发公司通常可以提供更具竞争力的价格。这是因为它…

「译文」深入了解Kubernetes和Nomad

&#x1f449;️原文链接: https://www.cncf.io/blog/2023/10/23/introduction-a-closer-look-at-kubernetes-and-nomad/ ✍️作者: Rob Newsome &#x1f4dd;Description: stack.io 产品管理主管 Rob Newsome 的特邀文章 在容器编排领域&#xff0c;Kubernetes 和 Nomad 都是…

SpringMVC(下)

1、拦截器&#xff1a; 1、拦截器的配置: SpringMVC中的拦截器用于拦截控制器方法的执行 SpringMVC中的拦截器需要实现HandlerInterceptor <!--配置拦截器--><mvc:interceptors><!--对所有的请求进行拦截--><!--<bean class"com.songzhishu.m…

【2023CANN训练营第二季】——通过一份入门级算子开发代码了解Ascend C算子开发流程

本次博客讲解的代码是Gitee代码仓的Ascend C加法算子开发代码&#xff0c;代码地址为&#xff1a; quick-start 打开Add文件&#xff0c;可以看到文件结构如下&#xff1a; 其中add_custom.cpp是算子开发的核心文件&#xff0c;包括了核函数的实现&#xff0c;展示了如何在Asc…

#力扣:LCP 01. 猜数字@FDDLC

LCP 01. 猜数字 - 力扣&#xff08;LeetCode&#xff09; 一、Java class Solution {public int game(int[] guess, int[] answer) {int cnt0;for(int i0;i<3;i){if(guess[i]answer[i])cnt;}return cnt;} }

Spring Cloud之负载均衡与服务调用(Ribbon)

目录 Ribbon 简介 负载均衡 简介 负载均衡方式 服务端负载均衡 工作原理 特点 客户端负载均衡 工作原理 特点 对比 实现 负载均衡策略 切换负载均衡策略 定制负载均衡策略 超时与重试 单个服务配置 全局配置 服务调用 示例 Ribbon 简介 Ribbon 是 Netfli…

WEB使用百度地图展示某地地址

第一步 进入百度地图开发平台 百度地图开放平台 | 百度地图API SDK | 地图开发 第二步注册 获取AK秘钥&#xff0c;点击【创建应用】进入AK申请页面&#xff0c;填写应用名称&#xff0c;务必选择AK类型为“浏览器端”&#xff0c;JS API只支持浏览器端AK进行请求与访问 下面…

[Leetcode] 0104. 二叉树的最大深度

104. 二叉树的最大深度 题目描述 给定一个二叉树&#xff0c;找出其最大深度。 二叉树的深度为根节点到最远叶子节点的最长路径上的节点数。 说明: 叶子节点是指没有子节点的节点。 示例&#xff1a; 给定二叉树 [3,9,20,null,null,15,7]&#xff0c; 3/ \9 20/ \15 7返回它…