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,一经查实,立即删除!

相关文章

Spring Cloud学习:二【详细】

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

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

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

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

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

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

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

(1)(1.9) HC-SR04声纳

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最小二乘法,可视化UI界面

import tkinter as tk import numpy as np import matplotlib.pyplot as plt from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg from pylab import mplmpl.rcParams[font.sans-serif] [FangSong] # 指定默认字体 mpl.rcParams[axes.unicode_minus] False …

雪糕冰淇淋经营配送小程序商城效果如何

雪糕冰淇淋是很多年轻人喜欢的食品之一,市面上的雪糕品牌类型众多,销售模式主要为厂家批发、经销商零售等,由于雪糕冰淇淋的易化性,很多用户会选择就近购买,但制作技术升级和长途冷藏技术下,网购成为另一种…

VB.NET 三层登录系统实战:从设计到部署全流程详解

目录 前言: 什么是三层 为什么要用到三层: 饭店→软件 理解: 过程: 1.三层包图: 2.数据库 3.三层项目 4.用户界面 5.添加引用 代码实现: Entity层 BLL层 DAL层 UI层 总结: 前言: 什么是三层 三层就是把各个功能模块划分为表示层&#…

【从瀑布模式到水母模式】ChatGPT如何赋能软件研发全流程

文章目录 🎄前言🍔本书概要🌺内容简介🌺作者简介🌺专家推荐🛸读者对象🍔彩蛋 🎄前言 计算机技术的发展和互联网的普及,使信息处理和传输变得更加高效,极大地…

安全和便捷:如何将运营商二要素API应用于实名制管理中

引言 随着互联网的快速发展,数字化身份验证和实名制管理变得越来越重要。在金融、电子商务、社交媒体等领域,确保用户身份的安全和准确性至关重要。运营商二要素核验API成为了实名制管理的有力工具,它不仅能够提供高水平的安全性&#xff0c…

JVM进阶(2)

一)方法区: java虚拟机中有一个方法区,该区域被所有的java线程都是共享,虚拟机一启动,运行时数据区就被开辟好了,官网上说了方法区可以不压缩还可以不进行GC,JAVA虚拟机就相当于是接口,具体的HotSpot就是虚…

虹科案例 | 使用虹科MSR147WD测试自行车背包的热生理舒适性

使用虹科MSR147WD测试自行车背包的热生理舒适性 在进行运动活动时,佩戴背包会对穿戴者的舒适度产生影响,并且也会对热调节产生影响,类似于一件服装的作用。为了优化背包的材料和设计属性,我们利用MSR Electronics GmbH的微型数据记…

Java实现Csv文件导入导出

Java实现Csv文件导入导出 什么是.csv文件? CSV(Comma-Separated Values,逗号分隔的值)是一种简单、实用的文件格式,用于存储和表示包括文本、数值等各种类型的数据。CSV 文件通常以 .csv 作为文件扩展名。这种文件格…