如何建设景区旅游网站,个人网站作品下载,南通制作网站的有哪些公司吗,建设邯郸网站目录 前言#xff1a;
一、规则图形
1.介绍#xff1a;
2.正方形与长方形#xff08;实心与空心#xff09;
2.1正方形#xff1a;
2.2长方形
3.圆形与椭圆形#xff08;空心与实心#xff09;
3.1圆形与椭圆形
4.不同方向的三角形 4.1原理
4.2边框属性
5.四…目录 前言
一、规则图形
1.介绍
2.正方形与长方形实心与空心
2.1正方形
2.2长方形
3.圆形与椭圆形空心与实心
3.1圆形与椭圆形
4.不同方向的三角形 4.1原理
4.2边框属性
5.四分之一圆
5.1原理
5.2代码展示
5.3结果展示
5.4四分之一空心圆
6.二分之一圆
6.1原理 6.2代码展示
6.3运行结果
7.圆环
二、不规则图型
1.梯形
1.1原理
1.2不同颜色边框代码 1.3梯形代码
2.直角梯形
2.1原理
2.2代码示例
2.3运行结果如下所示
3.五边形
3.1原理
3.2 代码示例
3.3 运行结果展示
4.六边形
4.1原理
4.2代码示例
4.3 结果展示
5.六角形
5.1原理
5.2代码示例
5.3结果展示
6.八角形
6.1原理
6.2代码示例
6.3结果展示
7.十二角形
7.1原理
7.2代码实现
7.3结果示例
三、结束语 前言
css是我们用来美化我们的html的一种方式包含了多种属性内容利用好css当中的属性可以让我们更好的去对页面进行布局利用css进行布局是我们的下限那么css上限在哪里呢?就是利用css来完成整个的html页面纯css写一个静态页面包含里面的一些icon图标当然在我们开发当中是不适用的但一定会减少浏览器的一些请求小伙伴们可以自行尝试提升自己的css水平那么接下来我们来了解一下不一样的css。
一、规则图形
1.介绍
首先icon图标呢需要很多不规则图形进行拼凑扭曲旋转圆角等等那么我们先来介绍一下常用的不规则图形这里我们来介绍一下常用的但是不仅限于此后面会进行补充。
2.正方形与长方形实心与空心
2.1正方形
设置其宽高相等添加背景颜色,添加边框如果不填加背景颜色那么他就是一个空心的正方型小伙伴们要注意了当不添加背景颜色的时候他并不是白色而是透明色。
这里的边框可以根据自己想要的宽度进行设置如果小伙伴不清楚css属性那么可以查看博主html的css博客来学习o~
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.square {width: 100px;height: 100px;background-color: pink;border:1px solid #000;}/style
/headbody!-- 正方形 --div classsquare/div
/body/html
效果图如下 2.2长方形
设置不一样的宽高不就可以啦~这里小伙伴们可以自行测试 width是设置宽的属性height是设置高的属性。
3.圆形与椭圆形空心与实心
3.1圆形与椭圆形
主要使用border-radius来进行设置这个是css3中新增的属性。
那么我们直接上代码
这里呢我们在以上正方形代码当中添加了一个border-radius属性值为50%也就是将其设置为圆形同样的border属性是用来添加边框的去除背景可以将其设置为一个空心的圆形增加边框宽度可以得到一个圆环小伙伴自行测试o~。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.square {width: 100px;height: 100px;background-color: pink;border: 1px solid #000;border-radius: 50%;}/style
/headbody!-- 正方形 --div classsquare/div
/body/html 结果展示
、 首先你可以减少百分比数值第二种可以利用数值px的形式来进行设置通过测试来调整得到你需要的结果。
思考如果你想要得到如下示例该如何做 接下来我们来分析一下思路这里大家可以尝试一下
首先我们需要得到一个长方形可以设置宽200px高40px第二当然是用到我们的border-radius属性了那么参数是多少呢大家可以尝试一下常用参数是25px(并不适用于所有盒子大家可以自行测试其他数值) 如果那你需要一个空心的那么就将背景颜色去掉就可以了同样的如果不需要边框去掉就可以了。
4.不同方向的三角形 4.1原理
利用边框属性来实现那么我们先来看一下以下盒子 4.2边框属性
那么他是如何实现的呢这里我们设置一个宽高为100px的正方形分别添加他的上下左右边框为3px以及不同的边框颜色这里我们可以很清楚的看到他们分别是一个梯形中间空心的部分是我们100×100pxd的空心盒子代码如下
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.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
/headbody!-- 正方形 --div classsquare/div
/body/html
那么当我们不设置盒子宽高的时候会出现什么情况呢我们接着往下看,这里我们将盒子的宽高设置为0边框改为40px边框太小我们会看不清楚这里我们将边框宽度设置为40px)代码如下
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.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
/headbody!-- 正方形 --div classsquare/div
/body/html
运行结果 这时候我们可以看到四边的边框就成了四个三角形那我们需要向右的三角形就可以将黄色部分提取出来那么如何得到左边边框三角形呢简单来说就是将上右下的边框干掉就可以啦这里我们可以使用属性值transparent将其他边框透明掉隐藏就可以得到左边框的黄色三角形了。
代码如下
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.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
/headbody!-- 正方形 --div classsquare/div
/body/html
那么我们来看一下效果
左边是我们得到的黄色三角形实际呢我们的上右下三部分是隐藏掉了也就是第二幅图中红色边框框选住的内容。那么同样的我们可以利用好transparent属性来完成其他方向的三角形大家可以自行尝试一下~ 5.四分之一圆
5.1原理 首先需要设置相同宽高得到一个正方形使用border_radius属性将正方型变为圆形只设置其中一个边框的圆角其他为0 5.2代码展示
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.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
/headbodydiv classsquare/divbrdiv classsquare2/divbrdiv classsquare3/divbrdiv classsquare4/div
/body/html
5.3结果展示
这里我们分别设置了上右下左的边框圆角得到的结果如下 5.4四分之一空心圆
四分之一空心圆与四分之一实心圆是相同的只需要将背景属性去掉然后改为border属性就可以了通过border-width属性来设置不同的上右下左的边框这一部分的内容大家后续自己尝试一下这里就不多说了。
6.二分之一圆
6.1原理 得到二分之一正方形利用圆角得到半圆 6.2代码展示
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.square {/* 设置宽为高的一半(相当于得到半个正方形) */width: 100px;height: 50px;/* 设置背景颜色 */background-color: red;/* 设置上右的圆角与宽相同其余为0即可得到 */border-radius: 100px 100px 0 0;}/style
/headbodydiv classsquare/div
/body/html
6.3运行结果 6.4二分之一空心圆
原理与四分之一空心圆相同我们将背景属性去掉然后改为border属性就可以了通过border-width属性来设置不同的边框这一部分大家自行测试一下就可以了。
7.圆环
圆环内容相对比较简单只需要将圆的border属性调大一些就可以得到一个圆环。
代码展示
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.square {/* 设置相同宽高 */width: 100px;height: 100px;/* 设置圆角得到圆 */border-radius: 50%;/* 添加边框属性 */border: 20px solid red;}/style
/headbodydiv classsquare/div
/body/html
结果展示 二、不规则图型
1.梯形
1.1原理
利用边框属性来制作一个梯形同样的像上面的三角形一样我们将四边形各个边框设置不同的颜色就可以得到一下图形我们可以清楚的看到实际每个边框加大边框宽度时每个边框呈现梯形的样子那么我们就可以利用边框属性来得到一个梯形。
1.2不同颜色边框代码 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.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
/headbodydiv classsquare/div
/body/html 1.3梯形代码
我们将上边框以及左右边框都设置为透明色就可以得到一个等腰梯形。同样的我们可以得到不同方向的等腰梯形。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.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
/headbodydiv classsquare/div
/body/html
结果如下 那么现在来思考一下如何得到一个直角梯形呢我们接着来往下走......
2.直角梯形
2.1原理
获得一个等腰梯形是将其余边框进行了隐藏因为临近边框也设置了宽度所以得到的梯形斜边是由相邻边框进行挤压得到的那么我们可以将等腰梯形的相邻一边的边框宽度设置为0就可以得到啦那为什么不将两边都设置为0呢如果边都设置为0那我们就会得到一个矩形啦~为了更好的理解其中的原理大家可以尝试一下哦~
那么接下来我我们来看直角梯形的代码
2.2代码示例
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.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
/headbodydiv classsquare/div
/body/html
2.3运行结果如下所示
注这里设置了左边框为0得到直角梯形也可以设置有边框哦~ 3.五边形
3.1原理
将正方形与三角形结合得到五边形,上面我们已经够讲到了正方形与三角形大家忘记的话可以再看一下哦。
3.2 代码示例
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.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
/headbodydiv classboxdiv classtriangle/divdiv classsquare/div/div/body/html
3.3 运行结果展示 4.六边形
4.1原理
利用两个等腰梯形得到一个六边形通过两个等腰梯形的拼接定位来实现六边形。
4.2代码示例
这里是使用了一个上边框制作的梯形以及一个下边框制作的梯形将两个梯形进行组合拼接得到以恶搞六边形的形状。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.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
/headbodydiv classboxdiv classsquare/divdiv classsquare2/div/div/body/html
4.3 结果展示 5.六角形
5.1原理
利用两个三角形进行旋转得到一个六角形
5.2代码示例
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.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
/headbodydiv classboxdiv classsquare/divdiv classsquare2/div/div/body/html
5.3结果展示 6.八角形
6.1原理
利用两个正方形得到一个八角形通过旋转定位的属性来设置具体的位置
6.2代码示例
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.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
/headbodydiv classboxdiv classsquare/divdiv classsquare2/div/div/body/html
6.3结果展示 7.十二角形
7.1原理
有了上面的代码下伙伴可以思考一下十二角星如何实现。
那么就是三个正方型进行旋转定位来实现的那么我们先来看一下具体代码吧。
7.2代码实现
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.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
/headbodydiv classboxdiv classsquare/divdiv classsquare2/divdiv classsquare3/div/div/body/html
7.3结果示例 三、结束语
那么本节不一样的css就到此结束啦下一节我们就可以开始做一些icon图标啦。那么作业来啦如何利用本节知识来做以下效果呢小伙伴们可以尝试以下哦~可以自己添加一些其他元素来丰富画面ok,那么本节内容就到此结束了下一节我们来看具体代码实现操作以及其他的图标渲染。
