当前位置： 首页 > article >正文

不一样的css(三)

article 2024/11/30 19:06:09

目录

一、前言

二、五角星

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.kler.cn/a/415998.html

相关文章：

  • 多线程+线程池
  • Scala学习记录，统计成绩
  • Appflyer记录卸载事件
  • “移门缓冲支架：为家庭安全加码”
  • 对智能电视直播App的恶意监控
  • 记录一次 k8s 节点内存不足的排查过程
  • Windows安装Node.js
  • Linux防火墙及安全策略的配置
  • 新型大语言模型的预训练与后训练范式，苹果的AFM基础语言模型
  • elementUI的单选框如何设置默认选中
  • 【创意框架】AI一键将草图生成动画，适合做儿童素质教育
  • 电机瞬态分析基础（3）：空间矢量
  • Leetcode（区间合并习题思路总结，持续更新。。。）
  • 抽卡代码（简陋） C#
  • java虚拟机——如何排查jvm问题
  • 在鲲鹏麒麟服务器上部署MySQL主从集群
  • 团队自创【国王的魔镜-2】
  • Appflyer记录卸载事件
  • 替代Postman ,17.3K star！
  • 鸿蒙多线程开发——sendable共享容器
  • 右值引用和移动语义：
  • `uni.setClipboardData` 是 uni-app 提供的一个 API 设置系统剪贴板的内容
  • QT之QML布局总结
  • 见闻-代理概念和作用
  • 模电期末笔记 (包过版)
  • 【Maven】项目创建