不一样的css(三)

news2025/2/22 18:08:33

目录

一、前言

二、五角星

1.五角星，叠盖法：

2.五角星，拼凑法： 

3.五角星，svg画法：

4.五角星，利用clip-path属性进行裁剪

三、结束语

一、前言

通过上两节的内容我们对css画小图标有了新的理解，同时也提高了我们的css水平，那么今天我们继续来学习css画小图标系列，来看不一样的css。

二、五角星

1.五角星，叠盖法：

将一个向上三角型与一个向下三角形进行交叉定位，再利用一个与背景色形同的三角形叠盖到向上三角型上，就完成了一个五角星，具体查看下列代码。

 步骤一：制作向下与向上 的三角形

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		
		.star{
			/*制作向下三角型，看不懂的可以参考不一样的css(一)*/
			width: 0;
			height: 0;
			border-top:40px solid  red;
			border-bottom:40px solid  transparent;
			border-right:40px solid  transparent;
			border-left:40px solid  transparent;
/*			让盒子进行居中展示*/
			margin: 100px auto;
/*			设置定位*/
			position: relative;

		}
		.star::before{
/*			利用伪元素减少html代码，来制作一个向上三角形*/
			content: "";
		    display: block;
		    
		    width: 0;
		    height: 0;
		    border-top: 40px solid transparent;
		    border-bottom: 69px solid red;
		    border-right: 40px solid transparent;
		    border-left: 40px solid transparent;
/*		    设置向上三角形的位置*/
		    position: absolute;
		    top: -105px;
		    left: -39px;
		}
	</style>
</head>
<body>
	
	<div class="star"></div>
</body>
</html>

结果展示

这里我们可以清楚的看到，下面的角是平着的，我们可以通过设置一个与背景颜色相同的三角形进行叠盖，覆盖在大的向上的三角形上，就可以在视觉上形成一个五角星，那么我们继续往下看：

 新增的代码为新添加的伪元素after的内容：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	
		.star{
			/*制作向下三角型，看不懂的可以参考不一样的css(一)*/
			width: 0;
			height: 0;
			border-top:40px solid  red;
			border-bottom:40px solid  transparent;
			border-right:40px solid  transparent;
			border-left:40px solid  transparent;
/*			让盒子进行居中展示*/
			margin: 100px auto;
/*			设置定位*/
			position: relative;

		}
		.star::before{
/*			利用伪元素减少html代码，来制作一个向上三角形*/
			content: "";
		    display: block;
		    
		    width: 0;
		    height: 0;
		    border-top: 40px solid transparent;
		    border-bottom: 69px solid red;
		    border-right: 40px solid transparent;
		    border-left: 40px solid transparent;
/*		    设置向上三角形的位置*/
		    position: absolute;
		    top: -105px;
		    left: -39px;
		}
		.star::after{
/*			利用伪元素制作覆盖在上面的小三角型 这里是相对上面代码新增的内容*/
			content: "";
		    display: block;
		    position: absolute;
		    width: 0;
		    height: 0;
		    border-top: 54px solid transparent;
		    border-bottom: 16px solid white;
		    border-right: 40px solid transparent;
		    border-left: 40px solid transparent;
/*		    设置三角型的位置*/
		    top: -66px;
		    left: -39px;
		}
	</style>
</head>
<body>
	
	<div class="star"></div>
</body>
</html>

运行结果：

这样我们就得到了一个五角星，这样来看我们五角星，有些别扭，那么我们继续来学习下一种方法，来制作五角星。 

2.五角星，拼凑法： 

通过利用三个三角形，进行拼凑，旋转定位来实现一个五角星。

步骤一：写一个钝角的等腰三角形

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.star{
			margin: 100px auto;/*设置盒子距离顶部100px 居中显示*/
		    width: 0;/*写一个三角星*/
		    height: 0;
		    border-top: 30px solid red;/*让顶部边框距离变小，其余大于顶部边框且相等就可以得到一个钝角的等腰三角星*/
		    border-left: 40px solid transparent;
		    border-bottom: 40px solid transparent;
		    border-right: 40px solid transparent;
		    transform: rotate(-140deg);/*将得到的图形进行旋转*/
		    position: relative;/*设置定位便于后续盒子进行位置确定*/
		}
	
	</style>
</head>
<body>
	
	<div class="star"></div>
	
</body>
</html>

结果：

步骤二：写第二个三角形进行拼凑

通过伪元素，来写第二个三角型，道理相同，制作一个三角型，对其进行旋转，定位，放在合适的位置

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		
		.star{
			margin: 100px auto;
		    width: 0;
		    height: 0;
		    border-top: 30px solid red;
		    border-left: 40px solid transparent;
		    border-bottom: 40px solid transparent;
		    border-right: 40px solid transparent;
		    transform: rotate(-140deg);
		    position: relative;
		}
		.star::before{
			content: "";
		    display: inline-block;
		    width: 0;
		    height: 0;
		    border-top: 30px solid red;
		    border-left: 40px solid transparent;
		    border-bottom: 40px solid transparent;
		    border-right: 40px solid transparent;
		    transform: rotate(280deg);
		    position: absolute;
		    top: -50px;
		    left: -15px;
		}
		
	</style>
</head>
<body>
	
	<div class="star"></div>
	
</body>
</html>

 结果如下图：

步骤三：画出第三个三角形，进行最后的拼凑

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	
		.star{
			margin: 100px auto;
		    width: 0;
		    height: 0;
		    border-top: 30px solid red;
		    border-left: 40px solid transparent;
		    border-bottom: 40px solid transparent;
		    border-right: 40px solid transparent;
		    transform: rotate(-140deg);
		    position: relative;
		}
		.star::before{
			content: "";
		    display: inline-block;
		    width: 0;
		    height: 0;
		    border-top: 30px solid red;
		    border-left: 40px solid transparent;
		    border-bottom: 40px solid transparent;
		    border-right: 40px solid transparent;
		    transform: rotate(280deg);
		    position: absolute;
		    top: -50px;
		    left: -15px;
		}
		.star::after{
			content: "";
		    display: inline-block;
		    width: 0;
		    height: 0;
		    border-top: 30px solid red;
		    border-left: 40px solid transparent;
		    border-bottom: 40px solid transparent;
		    border-right: 40px solid transparent;
		    transform: rotate(426deg);
		    position: absolute;
		    top: -43px;
		    left: -57px;
		}
	</style>
</head>
<body>
	
	<div class="star"></div>
	
</body>
</html>

运行结果：

 

 以上就是利用拼凑法将三个三角型进行拼凑，从而得到一个五角星

3.五角星，svg画法：

利用svg标签，设置其路径，来完成一个五角星：

HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
        /* 作为背景图通过css进行插入 */
		.icon_svg{
			width: 400px;
			height: 400px;
			background: #ccc;
			border: 3px solid pink;
			background: url(./svg/index.svg);
		}
		
	</style>
</head>
<body>
	
	<div class="icon_svg"></div>
	
</body>
</html>

svg文件部分

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100.94232177734375" height="93.56983947753906" viewBox="0 0 100.94232177734375 93.56983947753906" fill="none">
	<path d="M1.70058 36.2561L99.2006 36.2561L9.70058 92.2561L51.7006 1.25607L88.7006 92.2561L1.70058 36.2561Z" stroke="rgba(255, 161, 161, 1)" stroke-width="1"      fill="#FF0000" >
	</path>
</svg>

运行结果：

利用svg呢我们就可以实现一个比较完美的五角星

4.五角星，利用clip-path属性进行裁剪

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.star {
		    width: 100px;
		    height: 100px;
		    background: red;
		    /* 绘制路径 */
		    clip-path:polygon(50% 0,65% 40%, 100% 40%,72% 60%,85% 100%,50% 75%,15% 100%,28% 60%,0 40%,35% 40%);
		}
	</style>
</head>
<body>
	
	<div class="star"></div>
	
</body>
</html>

 结果展示

三、结束语

本节内容我们主要讲解了四种纯css画五角星的方法，那么下一节我们继续来学习纯css画小图标，而且我们会学习一个新的内容，svg,通过svg我们可以更加快速的去得到一个css小图标，我们下一节再见。 

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

QT:生成二维码 QRCode

QT:生成二维码 QRCode

目录 1.二维码历史2.QT源码3.界面展示4.工程源码链接 1.二维码历史 二维码&#xff08;2-Dimensional Bar Code&#xff09;&#xff0c;是用某种特定的几何图形按一定规律在平面&#xff08;二维方向上&#xff09;分布的黑白相间的图形记录数据符号信息的。它是指在一维条码…
阅读更多...
JavaWeb|网页开发基础入门

JavaWeb|网页开发基础入门

成分有点复杂 要开始接触网页开发了 开发工具的下载链接&#xff1a;https://code.visualstudio.com/ 安装好后&#xff0c;我们开始入门吧&#xff0c;废话就不多说了 一、基础知识大家了解一下 1、文本类标签 文本结构 一级标题<h1> Heading 1</h1> 二级标…
阅读更多...
Redis开发03：常见的Redis命令

Redis开发03：常见的Redis命令

1.输入以下命令&#xff0c;启动redis。 sudo service redis-server start 如果你是直接安装在WSL的&#xff0c;搜索栏搜索Ubuntu或者点击左下角Windows图表找到U那一栏&#xff0c;直接打开Ubentu&#xff0c;输入账密后&#xff0c;输入“sudo service redis-server start”…
阅读更多...
（超详细图文详情）Navicat 配置连接 Oracle

（超详细图文详情）Navicat 配置连接 Oracle

1、下载依赖文件 Oracle官网下载直链&#xff1a;https://www.oracle.com/database/technologies/instant-client/winx64-64-downloads.html 夸克网盘下载&#xff08;oracle19c版本&#xff09;&#xff1a;https://pan.quark.cn/s/5061e690debc 官网下载选择对应 Oracle 版…
阅读更多...
Istio_05_Istio架构

Istio_05_Istio架构

Istio_05_Istio架构 ArchitectureControl PlanePilotCitadelGalley Data PlaneSidecarIstio-proxyPilot-agentMetadta Exchange Ambient Architecture 如: Istio的架构(控制面、数据面) Gateway: Istio数据面的出/入口网关 Gateway分为: Ingress-gateway、Egress-gateway外部访…
阅读更多...
如何使用GCC手动编译stm32程序

如何使用GCC手动编译stm32程序

如何不使用任何IDE&#xff08;集成开发环境&#xff09;编译stm32程序? 集成开发环境将编辑器、编译器、链接器、调试器等开发工具集成在一个统一的软件中&#xff0c;使得开发人员可以更加简单、高效地完成软件开发过程。如果我们不使用KEIL,IAR等集成开发环境&#xff0c;…
阅读更多...
快速搭建一个博客！！！“Halo框架深度优化：搭建你的个性化博客或网站”

快速搭建一个博客！！！“Halo框架深度优化：搭建你的个性化博客或网站”

目录 引言&#xff1a; 一. 首先服务器上去下载一个docker 1.可以参考官方地址&#xff1a; 2. 通过宝塔来一键安装&#xff01;&#xff01;&#xff01; 3.也可以自己下载&#xff01;&#xff01;&#xff01; 1.卸载旧版 2.配置Docker的yum库 3.安装Docker 4.启动和…
阅读更多...
pcb线宽与电流

pcb线宽与电流

三十年一路高歌猛进的中国经济&#xff0c; 中国经历了几个三十年&#xff1f; 第一个三十年&#xff1a;以计划为导向。 第二个三十年&#xff1a;以经济为导向。 现在&#xff0c;第三个三十年呢&#xff1f; 应该是以可持续发展为导向。 传统企业摇摇欲坠&#xff0c; 新兴企…
阅读更多...
23种设计模式-抽象工厂(Abstract Factory)设计模式

23种设计模式-抽象工厂(Abstract Factory)设计模式

文章目录 一.什么是抽象工厂设计模式&#xff1f;二.抽象工厂模式的特点三.抽象工厂模式的结构四.抽象工厂模式的优缺点五.抽象工厂模式的 C 实现六.抽象工厂模式的 Java 实现七.代码解析八.总结 类图&#xff1a; 抽象工厂设计模式类图 一.什么是抽象工厂设计模式&#xff1f…
阅读更多...
VSCode修改资源管理器文件目录树缩进（VSCode目录结构、目录缩进、文件目录外观）workbench.tree.indent

VSCode修改资源管理器文件目录树缩进（VSCode目录结构、目录缩进、文件目录外观）workbench.tree.indent

文章目录 方法点击左下角小齿轮点击设置点击工作台&#xff0c;点击外观&#xff0c;找到Tree: Indent设置目录树的缩进 方法 点击左下角小齿轮 点击设置 点击工作台&#xff0c;点击外观&#xff0c;找到Tree: Indent设置目录树的缩进 "workbench.tree.indent"默认…
阅读更多...
Transformer.js（七）：ONNX 后端介绍 - 它是什么、如何将pytorch模型导出为ONNX格式并在web中使用

Transformer.js（七）：ONNX 后端介绍 - 它是什么、如何将pytorch模型导出为ONNX格式并在web中使用

在前面的文章中&#xff0c;我介绍了关于transformer.js的一些内容&#xff0c;快速连接&#xff1a; 1. 运行框架的可运行环境、使用方式、代码示例以及适合与不适合的场景2. 关于pipe管道的一切3. 底层架构及性能优化指南4. 型接口介绍5. Tokenizer 分词器接口解析 6. 处理工…
阅读更多...
玄机应急：linux入侵排查webshell查杀日志分析

玄机应急：linux入侵排查webshell查杀日志分析

目录 第一章linux:入侵排查 1.web目录存在木马&#xff0c;请找到木马的密码提交 2.服务器疑似存在不死马&#xff0c;请找到不死马的密码提交 3.不死马是通过哪个文件生成的&#xff0c;请提交文件名 4.黑客留下了木马文件&#xff0c;请找出黑客的服务器ip提交 5.黑客留…
阅读更多...
消息队列详解：从基础到高级应用

消息队列详解：从基础到高级应用

本文主旨 撰写这篇文章的目的在于向读者提供一个全面理解消息队列概念及其在实际应用中重要性的指南。通过从RocketMQ的基础组件如生产者、消费者、主题等的介绍到更高级的概念&#xff0c;比如集群消费与广播消费的区别、顺序消息的重要性等&#xff0c;我们希望能够帮助开发…
阅读更多...
qt QGraphicsRotation详解

qt QGraphicsRotation详解

1、概述 QGraphicsRotation 是 Qt 框架中 QGraphicsTransform 的一个子类&#xff0c;它专门用于处理图形项的旋转变换。通过 QGraphicsRotation&#xff0c;你可以对 QGraphicsItem&#xff08;如形状、图片等&#xff09;进行旋转操作&#xff0c;从而创建动态和吸引人的视觉…
阅读更多...
20241129解决在Ubuntu20.04下编译中科创达的CM6125的Android10出现找不到库文件

20241129解决在Ubuntu20.04下编译中科创达的CM6125的Android10出现找不到库文件

20241129解决在Ubuntu20.04下编译中科创达的CM6125的Android10出现找不到库文件libtinfo.so.5的问题 2024/11/29 20:41 缘起&#xff1a;中科创达的高通CM6125开发板的Android10的编译环境需要。 [ 11% 15993/135734] target Java source list: vr [ 11% 15994/135734] target …
阅读更多...
云轴科技ZStack助力 “上科大智慧校园信创云平台”入选上海市2024年优秀信创解决方案

云轴科技ZStack助力 “上科大智慧校园信创云平台”入选上海市2024年优秀信创解决方案

近日&#xff0c;为激发创新活⼒&#xff0c;促进信创⾏业⾼质量发展&#xff0c;由上海市经济信息化委会同上海市委网信办、上海市密码管理局、上海市国资委等主办的“2024年上海市优秀信创解决方案”征集遴选活动圆满落幕。云轴科技ZStack支持的“上科大智慧校园信创云平台”…
阅读更多...
【ArcGIS Pro】实现一下完美的坐标点标注

【ArcGIS Pro】实现一下完美的坐标点标注

在CAD里利用湘源可以很快点出一个完美的坐标点标注。 但是在ArcGIS Pro中要实现这个效果却并不容易。 虽然有点标题党&#xff0c;这里就尽量在ArcGIS Pro中实现一下。 01 标注实现方法 首先是准备工作&#xff0c;准备一个点要素图层&#xff0c;包含xy坐标字段。 在地图框…
阅读更多...
聚云科技×亚马逊云科技：打通生成式AI落地最后一公里

聚云科技×亚马逊云科技：打通生成式AI落地最后一公里

云计算时代&#xff0c;MSP&#xff08;云管理服务提供商&#xff09;犹如一个帮助企业上云、用云、管理云的专业管家&#xff0c;在云计算厂商与企业之间扮演桥梁的作用。生成式AI浪潮的到来&#xff0c;也为MSP带来全新的生态价值和发展空间。 作为国内领先的云管理服务提供…
阅读更多...
brew安装mongodb和php-mongodb扩展新手教程

brew安装mongodb和php-mongodb扩展新手教程

1、首先保证macos下成功安装了Homebrew&#xff0c; 在终端输入如下命令&#xff1a; brew search mongodb 搜索是不是有mongodb资源&#xff0c; 演示效果如下&#xff1a; 2、下面来介绍Brew 安装 MongoDB&#xff0c;代码如下&#xff1a; brew tap mongodb/brew brew in…
阅读更多...
图像显示的是矩阵的行和列，修改为坐标范围。

图像显示的是矩阵的行和列，修改为坐标范围。

x 3; y 3; f1x x^2 y^2; guance1 f1x; F (x, y) sqrt((x.^2 y.^2 - guance1).^2); % 使用点乘 [x, y] meshgrid(0:1:5, 0:1:5); Z F(x, y); figure; imagesc(Z); % 由于 imagesc 使用矩阵索引作为坐标&#xff0c;我们需要手动添加刻度 % 这里我们假设 x 和 y 的范围…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023