只用一个 HTML 元素可以写出多少形状?——不规则图形篇(序)

2024-08-26 22:52

本文主要是介绍只用一个 HTML 元素可以写出多少形状?——不规则图形篇(序),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

上一篇章,我们的不规则图形篇发了之后,我一个朋友说我“良心发现”了,不提供新的知识点了,而是实实在在的一些案例直接丢给大家。

的确,前面的每一个篇章,我都有引入新的知识点

规划这个系列,起初计划是在不规则图形篇中把 clip-path 属性引入进来。但是,其中牵扯到了 SVG 的填充规则,想到我之后会再次做一份完整的 SVG 课程,于是我自作主张在上一篇章将其取消了。

然而,好多朋友都说我“夹带私货”,我冤枉啊/(ㄒoㄒ)/~~……这不,我今天就补上这个序章,把 clip-path 属性也加上了!


一、clip-path 基本语法

clip-path 属性使用裁剪方式创建元素的可显示区域区域内的部分显示区域外隐藏

1. <clip-source> 值

clip-source 属性使用 url() 引用 SVG 的元素。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><clipPath id="clipPath"><path d="M259.8,8.4l9.3,60.3c1.5,9.6,14.3,11.6,18.7,3l27.5-54.4c5.1-10.1,20.5-5.1,18.7,6.1l-9.8,60.2c-1.5,9.5,10.1,15.5,16.9,8.6l43-43.3c8-8.1,21.1,1.4,15.9,11.5l-27.9,54.2c-4.4,8.6,4.8,17.8,13.4,13.4l54.2-27.9c10.1-5.2,19.6,7.9,11.5,15.9l-43.3,43c-6.9,6.8-0.9,18.4,8.6,16.9l60.2-9.8c11.2-1.8,16.2,13.6,6.1,18.7l-54.4,27.5c-8.6,4.4-6.6,17.2,3,18.7l60.3,9.3c11.2,1.7,11.2,17.9,0,19.6l-60.3,9.3c-9.6,1.5-11.6,14.3-3,18.7l54.4,27.5c10.1,5.1,5.1,20.5-6.1,18.7l-60.2-9.8c-9.5-1.5-15.5,10.1-8.6,16.9l43.3,43c8.1,8-1.4,21.1-11.5,15.9l-54.2-27.9c-8.6-4.4-17.8,4.8-13.4,13.4l27.9,54.2c5.2,10.1-7.9,19.6-15.9,11.5l-43-43.3c-6.8-6.9-18.4-0.9-16.9,8.6l9.8,60.2c1.8,11.2-13.6,16.2-18.7,6.1l-27.5-54.4c-4.4-8.6-17.2-6.6-18.7,3l-9.3,60.3c-1.7,11.2-17.9,11.2-19.6,0l-9.3-60.3c-1.5-9.6-14.3-11.6-18.7-3l-27.5,54.4c-5.1,10.1-20.5,5.1-18.7-6.1l9.8-60.2c1.5-9.5-10.1-15.5-16.9-8.6l-43,43.3c-8,8.1-21.1-1.4-15.9-11.5l27.9-54.2c4.4-8.6-4.8-17.8-13.4-13.4l-54.2,27.9c-10.1,5.2-19.6-7.9-11.5-15.9l43.3-43c6.9-6.8,0.9-18.4-8.6-16.9L23.3,334c-11.2,1.8-16.2-13.6-6.1-18.7l54.4-27.5c8.6-4.4,6.6-17.2-3-18.7l-60.3-9.3c-11.2-1.7-11.2-17.9,0-19.6l60.3-9.3c9.6-1.5,11.6-14.3,3-18.7l-54.4-27.5c-10.1-5.1-5.1-20.5,6.1-18.7l60.2,9.8c9.5,1.5,15.5-10.1,8.6-16.9l-43.3-43c-8.1-8,1.4-21.1,11.5-15.9l54.2,27.9c8.6,4.4,17.8-4.8,13.4-13.4l-27.9-54.2c-5.2-10.1,7.9-19.6,15.9-11.5l43,43.3c6.8,6.9,18.4,0.9,16.9-8.6L166,23.3c-1.8-11.2,13.6-16.2,18.7-6.1l27.5,54.4c4.4,8.6,17.2,6.6,18.7-3l9.3-60.3C241.9-2.8,258.1-2.8,259.8,8.4z"/></clipPath>
</svg>
<div></div>

可以看到,我们在 HTML 中插入一个 svg 元素一个 div 元素。设置 svg 元素视口为从左上角开始宽 500 且高 500 的范围,并在 svg 元素中声明一个 clipPath 标签,并在里面写入一个 path 标签。对于 path 标签中,我们使用 d 属性写了一个圆角二十角星路径

div {position: fixed;top: 0;right: 0;bottom: 0;left: 0;margin: auto;width: 500px;height: 500px;background: red;clip-path: url(#clipPath);
}

在 CSS 中,我们把 div 元素定位浏览器中央,控制 div 元素的宽度高度均为 500px,设置背景色红色

设置 clip-path 属性,在 url 方法中使用 ID 选择器定位了 svg 元素中 clipPath 标签的 id 属性。

可以看到,整个 div 元素只显示了圆角二十角星形状

2. <basic-shape> 值

basic-shape 是一种表现基础图形CSS 数据类型。

  • 当构建一个图形时,运用了 <basic-shape> 值的属性就会定义一个相关的盒模型

  • 基础图形使用的坐标系统即设置相关的盒模型左上角顶点原点,该坐标轴的 x 轴正方向y 轴正方向

  • 所有以百分比定义的长度将通过相关盒模型与使用的维度重定义

2.1 inset()

inset() 函数定义了一个矩形,其位于参考框每一边内侧的指定的距离处

<div></div>

我们的 HTML 只有一个 div 元素。然后 CSS 中继续直接模板中写属性。

width: 800px;
height: 600px;
background: red;
clip-path: inset(50px);

我们设置 div 宽度为 800px高度为 600px,设置背景色红色。然后直接设置 clip-path 属性的 inset 方法中传入一个 50px 的值。

得到一个普通的矩形,咋一看没有什么特别的。于是我们在浏览器开发者工具中查看该元素

我们可以看到,显示出来的矩形比原本我们设置的 div 元素的宽度高度每个方向小了 50px

我们在尝试给 inset 方法设置多个参数:

clip-path: inset(50px 25% 100px 100px);

直接给出通过浏览器开发者工具中查看的元素

可以看出来,是按照上右下左顺时针顺序设置向内的值。

我们继续,引入 round 关键字:

clip-path: inset(50px round 25px);

先看结果:

可以看到,显示矩形距离 div 容器边缘的距离都是 50px,然后显示矩形四个角都有一个 25px 圆角

一个大胆的想法诞生了:

clip-path: inset(50px 25% 100px 100px round 25px 50px 100px 200px);

直接看结果:

可以看到,按照上右下左顺时针顺序,显示矩形距离 div 容器边缘距离分别是 50px、25%、100px、100px,然后从显示矩形左上角开始,也是按照顺时针顺序,每一角圆角半径分别是 25px、50px、100px、200px

2.2 circle()

circle() 函数定义了一个圆形,使用半径位置来描述。

clip-path: circle(100px);

直接设置了一个值,看看效果:

果然,是在正中央显示一个半径为 100px 的圆形

我们再尝试控制一下圆形位置

clip-path: circle(500px at top left);

设置这个圆心位置为左上角

半径的设置中,还有两个关键词:

  • closest-side:使用从形状中心参照盒子最近边缘长度。对于圆形来说,这是任何维度中最近边缘

  • farthest-side:使用从形状中心参照盒子最远边缘长度。对于圆形来说,这是任何维度中最远边缘

clip-path: circle(closest-side at 40% 60%);

clip-path: circle(farthest-side at 40% 60%);

2.3 ellipse()

ellipse() 函数定义了一个椭圆,使用水平半径竖直半径和以及中心位置来描述。其语法和 circle() 函数几乎一样,只是多了一个半径

clip-path: ellipse(200px 150px);

clip-path: ellipse(400px 300px at top left);

clip-path: ellipse(closest-side closest-side at 40% 60%);

clip-path: ellipse(farthest-side farthest-side at 40% 60%);

clip-path: ellipse(farthest-side farthest-side);

2.4 polygon()

polygon() 函数通过提供一个或多个坐标对每一个坐标代表形状的一个顶点)来绘制多边形

clip-path: polygon(400px 0, 600px 200px, 450px 200px, 450px 600px, 350px 600px, 350px 200px, 200px 200px);

每个点是一对坐标值,用空格分隔。

每一个顶点坐标之间使用逗号分隔,理论上可以写出所有由全部直线构成的形状

2.5 path()

path() 函数接受 SVG 路径字符串作为参数,用于 CSS 形状运动路径模块绘制形状

clip-path: path('M0,250Q200,200,400,250T600,250V200L800,300L600,400V350 Q600,400,400,350T0,350Z');

看到 path 方法中的值,比较烧脑。

path() 函数中的字符串是 SVG 中 path 的 d 属性,其具体的语法不在这里展开了,将来我会制作一套详细的 SVG 教程,届时大家就完全明白了!

3. <geometry-box> 值

同 basic-shape 一起声明,它将为基本形状提供相应的参考框盒

  • margin-box:使用 margin box 作为引用框

  • border-box:使用 border box 作为引用框

  • padding-box:使用 padding box 作为引用框

  • content-box:使用 content box 作为引用框

  • fill-box:利用对象边界框object bounding box)作为引用框

  • stroke-box:使用笔触边界框stroke bounding box)作为引用框

  • view-box:使用最近的 SVG 视口viewport)作为引用框。如果 viewBox 属性被指定来为元素创建 SVG 视口引用框将会被定位坐标系原点引用框位于由 viewBox 属性建立的坐标系原点引用框尺寸用来设置 viewBox 属性的宽高值

这里就不设置具体的案例了,留给大家去测试吧!


二、云朵

上一个篇章的最后,我们在彩虹案例中写了一个小小的云朵,当时我们使用的是伪元素写的两个蛋形拼接而成的,感觉不太划算。那么,今天我们使用 clip-path 属性来写一个云朵吧!

clip-path: path('M250,400A100,50,0,1,1,200,200A150,100,0,1,1,500,200A270,100,0,1,1,550,400A100,50,0,1,1,250,400');

对于云朵,我们直接使用 path 方法,传入四个弧形即可完成。


三、二十角星

我们再来写一下上面的二十角星的形状吧!

clip-path: path('M259.8,8.4l9.3,60.3c1.5,9.6,14.3,11.6,18.7,3l27.5-54.4c5.1-10.1,20.5-5.1,18.7,6.1l-9.8,60.2c-1.5,9.5,10.1,15.5,16.9,8.6l43-43.3c8-8.1,21.1,1.4,15.9,11.5l-27.9,54.2c-4.4,8.6,4.8,17.8,13.4,13.4l54.2-27.9c10.1-5.2,19.6,7.9,11.5,15.9l-43.3,43c-6.9,6.8-0.9,18.4,8.6,16.9l60.2-9.8c11.2-1.8,16.2,13.6,6.1,18.7l-54.4,27.5c-8.6,4.4-6.6,17.2,3,18.7l60.3,9.3c11.2,1.7,11.2,17.9,0,19.6l-60.3,9.3c-9.6,1.5-11.6,14.3-3,18.7l54.4,27.5c10.1,5.1,5.1,20.5-6.1,18.7l-60.2-9.8c-9.5-1.5-15.5,10.1-8.6,16.9l43.3,43c8.1,8-1.4,21.1-11.5,15.9l-54.2-27.9c-8.6-4.4-17.8,4.8-13.4,13.4l27.9,54.2c5.2,10.1-7.9,19.6-15.9,11.5l-43-43.3c-6.8-6.9-18.4-0.9-16.9,8.6l9.8,60.2c1.8,11.2-13.6,16.2-18.7,6.1l-27.5-54.4c-4.4-8.6-17.2-6.6-18.7,3l-9.3,60.3c-1.7,11.2-17.9,11.2-19.6,0l-9.3-60.3c-1.5-9.6-14.3-11.6-18.7-3l-27.5,54.4c-5.1,10.1-20.5,5.1-18.7-6.1l9.8-60.2c1.5-9.5-10.1-15.5-16.9-8.6l-43,43.3c-8,8.1-21.1-1.4-15.9-11.5l27.9-54.2c4.4-8.6-4.8-17.8-13.4-13.4l-54.2,27.9c-10.1,5.2-19.6-7.9-11.5-15.9l43.3-43c6.9-6.8,0.9-18.4-8.6-16.9L23.3,334c-11.2,1.8-16.2-13.6-6.1-18.7l54.4-27.5c8.6-4.4,6.6-17.2-3-18.7l-60.3-9.3c-11.2-1.7-11.2-17.9,0-19.6l60.3-9.3c9.6-1.5,11.6-14.3,3-18.7l-54.4-27.5c-10.1-5.1-5.1-20.5,6.1-18.7l60.2,9.8c9.5,1.5,15.5-10.1,8.6-16.9l-43.3-43c-8.1-8,1.4-21.1,11.5-15.9l54.2,27.9c8.6,4.4,17.8-4.8,13.4-13.4l-27.9-54.2c-5.2-10.1,7.9-19.6,15.9-11.5l43,43.3c6.8,6.9,18.4,0.9,16.9-8.6L166,23.3c-1.8-11.2,13.6-16.2,18.7-6.1l27.5,54.4c4.4,8.6,17.2,6.6,18.7-3l9.3-60.3C241.9-2.8,258.1-2.8,259.8,8.4z');

直接复制上面的 clipPath 标签中的 path 标签中的 d 属性的值。

有没有发现?只要会 SVG 基本知识,要写各种形状,真的轻轻松松!

今天的干货应该合大家的胃口了吧!干货满满,诚意满满!

这里做个预告,完整的 SVG 课程,将会用图文视频讲解相结合的方式呈现出来,让我们拭目以待吧!

敬请期待我们本主题的最后一个篇章 —— 动画篇

关注“临界程序员”微信公众号,为您送上更多精彩内容!

这篇关于只用一个 HTML 元素可以写出多少形状?——不规则图形篇(序)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1109917

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

【VUE】跨域问题的概念,以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略,该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同,则需要服务器显式地允许这种跨域请求。一般在springbo

HTML提交表单给python

python 代码 from flask import Flask, request, render_template, redirect, url_forapp = Flask(__name__)@app.route('/')def form():# 渲染表单页面return render_template('./index.html')@app.route('/submit_form',

Java 后端接口入参 - 联合前端VUE 使用AES完成入参出参加密解密

加密效果: 解密后的数据就是正常数据: 后端:使用的是spring-cloud框架,在gateway模块进行操作 <dependency><groupId>com.google.guava</groupId><artifactId>guava</artifactId><version>30.0-jre</version></dependency> 编写一个AES加密

vue2 组件通信

props + emits props:用于接收父组件传递给子组件的数据。可以定义期望从父组件接收的数据结构和类型。‘子组件不可更改该数据’emits:用于定义组件可以向父组件发出的事件。这允许父组件监听子组件的事件并作出响应。(比如数据更新) props检查属性 属性名类型描述默认值typeFunction指定 prop 应该是什么类型,如 String, Number, Boolean,