不一样的css(三)

🕗 发布于 2024-11-26 13:39 css 前端 css画下图标系列

一、前言

二、五角星

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小图标，我们下一节再见。

原文地址：https://blog.csdn.net/weixin_65450681/article/details/144022224

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：【JavaEE】Cookie 和 Session
下一篇：CSS - CSS One-Line

Spring AOP常用类：ProceedingJoinPoint、JoinPoint
本文将介绍ProceedingJoinPoint和JoinPoint这两个Spring AOP框架中最常用到的类，并简单介绍它们之间的区别
阅读更多2024-11-27
thinkphp日志记录到文件
【代码】thinkphp日志记录到文件。
阅读更多2024-11-27
react实现模拟chatGPT问答页
大概思路：使用 fetch 接受数据，然后读取数据流，解析数据，获取到需要的数据结构，然后再封装展示的方法，html 用原生js获取id实现页面的展示，展示的过程中自定义定时器，实现打字机的效果。Ev
阅读更多2024-11-27
正则表达式
1.引入2.实践3.元字符3.1转义字符3.2 元字符种类3.3 元字符实践4.选择匹配符（“或”）5.限定符6.定位符7.分组7.1 捕获分组7.2 非捕获分组8.非贪婪匹配9.正则应用实例9.1基
阅读更多2024-11-27
安全帽和反光背心使用YOLO标记的图片资源打包下载
该数据集采用 YOLO格式，包括 JPG 图像和文本格式的相应注释文件。它对于安全设备至关重要的行业（包括建筑、制造和采矿）尤其有价值。通过利用此数据集，公司可以加强安全监控并降低因安全设备不足而导致
阅读更多2024-11-27
Paper -- 建筑高度估计 -- 基于街景图像和深度学习的城区建筑高度计算
这篇文章提出了一种利用街景图像和深度学习技术计算城市建筑高度的新方法。通过优化观察点位置的遗传算法和基于Mask R-CNN的深度学习模型该方法能够高效地检测建筑并精确计算其高度实验表明，平均高度误差
阅读更多2024-11-27
＜项目代码＞YOLOv8 航拍行人识别＜目标检测＞
YOLOv8 航拍行人识别项目代码
阅读更多2024-11-27
Zookeeper实现分布式锁、Zookeeper实现配置中心
新建一个maven项目ZK-Demo,然后在pom.xml里面引入相关的依赖。包括跨进程、跨机器、跨网络导致共享资源不一致的问题。分布式锁主要用于在分布式环境中保证数据的一致性。2. Zookeepe
阅读更多2024-11-27
基于vite创建的react18项目的单元测试
最近一个小伙伴进了字节外包，第一个活就是让他写一个单元测试。嗯，说实话，在今天之前我只知道一些理论，但是并没有实操过，于是我就试验了一下。通过查询资料，大拿们基本都说基于vite的项目，用vitest
阅读更多2024-11-27
.NET9 - Swagger平替Scalar详解（四）
本文分享Swagger中常用功能在Scalar中的使用，包括版本说明、接口分类、接口及参数描述、枚举类型、文件上传和JWT认证等，并提供相关代码示例和效果展示，以及可能遇到的问题和解决方案。
阅读更多2024-11-27

不一样的css(三)

一、前言

二、五角星

1.五角星，叠盖法：

2.五角星，拼凑法：

3.五角星，svg画法：

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

三、结束语

相关文章