不一样的CSS（一）
目录
前言：
css是我们用来美化我们的html的一种方式，包含了多种属性，内容，利用好css当中的属性，可以让我们更好的去对页面进行布局，利用css进行布局是我们的下限，那么css上限在哪里呢?就是利用css来完成整个的html页面，纯css写一个静态页面，包含里面的一些icon图标，当然，在我们开发当中是不适用的，但一定会减少浏览器的一些请求，小伙伴们可以自行尝试，提升自己的css水平，那么接下来我们来了解一下不一样的css。
一、规则图形
1.介绍：
首先icon图标呢，需要很多不规则图形，进行拼凑，扭曲，旋转，圆角等等，那么我们先来介绍一下常用的不规则图形（这里我们来介绍一下常用的，但是不仅限于此，后面会进行补充）。
2.正方形与长方形（实心与空心）
2.1正方形：
设置其宽高相等，添加背景颜色,添加边框，如果不填加背景颜色，那么他就是一个空心的正方型，小伙伴们要注意了，当不添加背景颜色的时候他并不是白色，而是透明色。
这里的边框可以根据自己想要的宽度进行设置，如果小伙伴不清楚css属性，那么可以查看博主html的css博客来学习o~
<!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>
.square {
width: 100px;
height: 100px;
background-color: pink;
border:1px solid #000;
}
</style>
</head>
<body>
<!-- 正方形 -->
<div class="square"></div>
</body>
</html>效果图如下：
2.2长方形
设置不一样的宽高，不就可以啦~这里小伙伴们可以自行测试 ，width是设置宽的属性，height是设置高的属性。
3.圆形与椭圆形（空心与实心）
3.1圆形与椭圆形
主要使用border-radius来进行设置，这个是css3中新增的属性。
那么我们直接上代码：
这里呢，我们在以上正方形代码当中添加了一个border-radius属性，值为50%，也就是将其设置为圆形，同样的border属性是用来添加边框的去除背景可以将其设置为一个空心的圆形，增加边框宽度可以得到一个圆环，小伙伴自行测试o~。
<!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>
.square {
width: 100px;
height: 100px;
background-color: pink;
border: 1px solid #000;
border-radius: 50%;
}
</style>
</head>
<body>
<!-- 正方形 -->
<div class="square"></div>
</body>
</html>结果展示：
、
- 首先你可以减少百分比数值
- 第二种，可以利用数值+px的形式来进行设置，通过测试来调整，得到你需要的结果。
思考：如果你想要得到如下示例该如何做？
接下来我们来分析一下思路（这里大家可以尝试一下）
- 首先，我们需要得到一个长方形，可以设置宽200px高40px
- 第二，当然是用到我们的border-radius属性了，那么参数是多少呢？大家可以尝试一下，常用参数是25px(并不适用于所有盒子，大家可以自行测试其他数值)
- 如果那你需要一个空心的，那么就将背景颜色去掉就可以了，同样的如果不需要边框去掉就可以了。
4.不同方向的三角形
4.1原理
利用边框属性来实现，那么我们先来看一下以下盒子：
4.2边框属性
那么，他是如何实现的呢？这里我们设置一个宽高，为100px的正方形，分别添加他的上下左右边框为3px以及不同的边框颜色，这里我们可以很清楚的看到他们分别是一个梯形，中间空心的部分是我们100×100pxd的空心盒子，代码如下：
<!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>
.square {
width: 100px;
height: 100px;
border-top: 10px solid red;
border-left: 10px solid rgb(255, 238, 48);
border-right: 10px solid rgb(43, 255, 0);
border-bottom: 10px solid rgb(0, 13, 255);
}
</style>
</head>
<body>
<!-- 正方形 -->
<div class="square"></div>
</body>
</html>那么当我们不设置盒子宽高的时候会出现什么情况呢？我们接着往下看,这里我们将盒子的宽高设置为0，边框改为40px（边框太小我们会看不清楚，这里我们将边框宽度设置为40px)，代码如下：
<!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>
.square {
width: 0;
height: 0;
border-top: 40px solid red;
border-left: 40px solid rgb(255, 238, 48);
border-right: 40px solid rgb(43, 255, 0);
border-bottom: 40px solid rgb(0, 13, 255);
}
</style>
</head>
<body>
<!-- 正方形 -->
<div class="square"></div>
</body>
</html>运行结果
这时候我们可以看到，四边的边框就成了四个三角形，那我们需要向右的三角形，就可以将黄色部分提取出来，那么如何得到左边边框三角形呢？简单来说就是将上右下的边框干掉就可以啦，这里我们可以使用属性值transparent将其他边框透明掉（隐藏）就可以得到左边框的黄色三角形了。
代码如下：
<!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>
.square {
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid rgb(255, 238, 48);
border-right: 40px solid transparent;
border-bottom: 40px solid transparent;
}
</style>
</head>
<body>
<!-- 正方形 -->
<div class="square"></div>
</body>
</html>那么我们来看一下效果：
左边是我们得到的黄色三角形，实际呢，我们的上右下三部分是隐藏掉了，也就是第二幅图中红色边框框选住的内容。那么同样的我们可以利用好transparent属性，来完成其他方向的三角形，大家可以自行尝试一下~
5.四分之一圆
5.1原理：
- 首先需要设置相同宽高得到一个正方形
- 使用border_radius属性将正方型变为圆形
- 只设置其中一个边框的圆角其他为0
5.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>
.square {
/* 设置相同宽高得到正方形 */
width: 100px;
height: 100px;
/* 设置背景颜色 */
background-color: red;
/* 设置上边框圆角为100px(与边框相同)，其余设置为0，即可得到 */
border-radius: 100px 0 0 0;
}
.square2 {
/* 设置相同宽高得到正方形 */
width: 100px;
height: 100px;
/* 设置背景颜色 */
background-color: red;
/* 设置上边框圆角为100px(与边框相同)，其余设置为0，即可得到 */
border-radius: 0 100px 0 0;
}
.square3 {
/* 设置相同宽高得到正方形 */
width: 100px;
height: 100px;
/* 设置背景颜色 */
background-color: red;
/* 设置上边框圆角为100px(与边框相同)，其余设置为0，即可得到 */
border-radius: 0 0 100px 0;
}
.square4 {
/* 设置相同宽高得到正方形 */
width: 100px;
height: 100px;
/* 设置背景颜色 */
background-color: red;
/* 设置上边框圆角为100px(与边框相同)，其余设置为0，即可得到 */
border-radius: 0 0 0 100px;
}
</style>
</head>
<body>
<div class="square"></div>
<br>
<div class="square2"></div><br>
<div class="square3"></div><br>
<div class="square4"></div>
</body>
</html>5.3结果展示
这里我们分别设置了，上右下左的边框圆角，得到的结果如下：
5.4四分之一空心圆
四分之一空心圆与四分之一实心圆是相同的，只需要将背景属性去掉，然后改为border属性就可以了，通过border-width属性来设置不同的上右下左的边框，这一部分的内容，大家后续自己尝试一下，这里就不多说了。
6.二分之一圆
6.1原理：
- 得到二分之一正方形
- 利用圆角得到半圆
6.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>
.square {
/* 设置宽为高的一半(相当于得到半个正方形) */
width: 100px;
height: 50px;
/* 设置背景颜色 */
background-color: red;
/* 设置上右的圆角与宽相同，其余为0，即可得到 */
border-radius: 100px 100px 0 0;
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>6.3运行结果
6.4二分之一空心圆：
原理与四分之一空心圆相同，我们将背景属性去掉，然后改为border属性就可以了，通过border-width属性来设置不同的边框，这一部分大家自行测试一下就可以了。
7.圆环
圆环内容相对比较简单，只需要将圆的border属性调大一些就可以得到一个圆环。
代码展示：
<!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>
.square {
/* 设置相同宽高 */
width: 100px;
height: 100px;
/* 设置圆角，得到圆 */
border-radius: 50%;
/* 添加边框属性 */
border: 20px solid red;
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>结果展示：
二、不规则图型
1.梯形
1.1原理
利用边框属性来制作一个梯形，同样的像上面的三角形一样，我们将四边形各个边框设置不同的颜色就可以得到一下图形，我们可以清楚的看到，实际每个边框加大边框宽度时，每个边框呈现梯形的样子，那么我们就可以利用，边框属性来得到一个梯形。
1.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>
.square {
width: 100px;
height: 100px;
border-top: 45px yellow solid;
border-left: 45px solid red;
border-right: 45px solid green;
border-bottom: 45px solid blue;
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>1.3梯形代码
我们将上边框以及左右边框都设置为透明色，就可以得到一个等腰梯形。同样的我们可以得到不同方向的等腰梯形。
<!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>
.square {
width: 100px;
height: 100px;
border-top: 45px transparent solid;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
border-bottom: 45px solid blue;
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>结果如下：
那么现在来思考一下如何得到一个直角梯形呢？我们接着来往下走......
2.直角梯形
2.1原理：
获得一个等腰梯形是将其余边框进行了隐藏，因为临近边框也设置了宽度，所以得到的梯形斜边是由相邻边框进行挤压得到的，那么我们可以将等腰梯形的相邻一边的边框宽度设置为0就可以得到啦，那为什么不将两边都设置为0呢？如果边都设置为0那我们就会得到一个矩形啦~为了更好的理解其中的原理，大家可以尝试一下哦~
那么接下来我我们来看直角梯形的代码
2.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>
.square {
width: 100px;
height: 100px;
border-top: 45px transparent;
border-left: 0px solid transparent;
border-right: 45px solid transparent;
border-bottom: 45px solid blue;
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>2.3运行结果如下所示：
注：这里设置了左边框为0，得到直角梯形，也可以设置有边框哦~
3.五边形
3.1原理
将正方形与三角形结合得到五边形,上面我们已经够讲到了正方形与三角形大家忘记的话可以再看一下哦。
3.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>
.triangle {
width: 0;
height: 0;
border-bottom: pink solid 50px;
border-left: transparent solid 50px;
border-right: transparent solid 50px;
border-top: transparent solid 50px;
}
.square {
width: 100px;
height: 60px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div class="triangle"></div>
<div class="square"></div>
</div>
</body>
</html>3.3 运行结果展示
4.六边形
4.1原理
利用两个等腰梯形得到一个六边形，通过两个等腰梯形的拼接，定位来实现六边形。
4.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>
.box {
position: relative;
}
.square {
width: 90px;
height: 90px;
border-top: 45px transparent;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
border-bottom: 45px solid blue;
}
.square2 {
width: 90px;
height: 90px;
border-top: 45px solid blue;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
border-bottom: 45px solid transparent;
}
</style>
</head>
<body>
<div class="box">
<div class="square"></div>
<div class="square2"></div>
</div>
</body>
</html>4.3 结果展示
5.六角形
5.1原理
利用两个三角形，进行旋转得到一个六角形
5.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>
.box {
/* 设置定位 */
position: relative;
}
.square {
width: 0;
height: 0;
/* 将其他边框隐藏得到向下三角形 */
border-top: 45px solid red;
border-bottom: 45px solid transparent;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
/* 设置定位父相子绝 */
position: absolute;
/* 移动合适的位置 相对于父级的位置*/
top: 57.5px;
}
.square2 {
width: 0;
height: 0;
/* 将其他边框隐藏得到向上三角形 */
border-top: 45px solid transparent;
border-bottom: 45px solid red;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
}
</style>
</head>
<body>
<div class="box">
<div class="square"></div>
<div class="square2"></div>
</div>
</body>
</html>5.3结果展示
6.八角形
6.1原理
利用两个正方形得到一个八角形，通过旋转定位的属性来设置具体的位置
6.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>
.box {
/* 设置定位 */
position: relative;
margin: 20px;
/*此处不用注意，只是将盒子移动到合适的位置*/
}
.square {
width: 100px;
height: 100px;
background-color: red;
/* 设置定位 */
/* 相对于父级的位置 */
position: absolute;
/* 旋转角度 */
transform: rotate(45deg);
}
.square2 {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="square"></div>
<div class="square2"></div>
</div>
</body>
</html>6.3结果展示
7.十二角形
7.1原理
有了上面的代码，下伙伴可以思考一下十二角星如何实现。
那么就是三个正方型进行旋转定位来实现的，那么我们先来看一下具体代码吧。
7.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>
.box {
/* 设置定位 */
position: relative;
margin: 20px;
/*此处不用注意，只是将盒子移动到合适的位置*/
}
.square {
width: 100px;
height: 100px;
background-color: red;
/* 设置定位 */
/* 相对于父级的位置 */
position: absolute;
/* 旋转角度 */
transform: rotate(30deg);
}
.square2 {
width: 100px;
height: 100px;
background-color: red;
/* 设置定位 */
/* 相对于父级的位置 */
position: absolute;
/* 旋转角度 */
transform: rotate(60deg);
}
.square3 {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="square"></div>
<div class="square2"></div>
<div class="square3"></div>
</div>
</body>
</html>7.3结果示例：
三、结束语
那么本节不一样的css，就到此结束啦，下一节我们就可以开始做一些icon图标啦。那么作业来啦，如何利用本节知识来做以下效果呢？小伙伴们可以尝试以下哦~可以自己添加一些其他元素来丰富画面，ok,那么本节内容就到此结束了，下一节我们来看具体代码实现操作，以及其他的图标渲染。
原文地址：https://blog.csdn.net/weixin_65450681/article/details/143563439
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！