技术文章 >web前端 >css教程
css常见问题：如何画多边形（三角形~六边形）
青灯夜游青灯夜游2021-09-16 10:57:38转载
利用纯CSS如何画多边形？本篇文章就来给大家介绍一下从纯CSS画三角形开始，介绍一下画四边形、五边形、六边形的方法，更高的实现方式也可以此类推画出来，希望对大家有所帮助！
今天要学习一下面试中常考的一个css题目，用css画多边形。 这一次以三角形、四边形、五边形、六边形为例，首先开始之前需要了解一些必要的知识。
一、基础知识储备
本次将利用纯CSS知识来绘制一些形状，为了绘制这些形状，首先补习一下所需的CSS基础知识点——css盒模型。【相关推荐：《css视频教程》】
1.png
由上图可以看出标准的盒模型是由content，padding，border，margin组成的，我们用代码看一下具体情况吧。
<!--HTML部分，此部分代码若是不变，后面将复用不在赘述-->
<div id="main"></div>
/*css部分*/
#main {
width: 100px
height: 100px
border: 200px solid red
}
效果图如下：
2.png
二、实战
光说不练假把式，现在就由利用这些基本的CSS属性来绘制常见的三角形、四边形、五边形……
2.1 四边形
若是不能用直接使用background-color属性来画一个四边形，由上图我们可以看出若是让content的宽高全部设为0，并设置border的宽高，那么我们就可以得到一个仅由border构成的四边形了，四边形又分为正方形、平行四边形、矩形等等，这里就让我们使用border来实现上述中的三种图形吧。
2.1.1 正方形
首先让我们来实现一下最简单的正方形吧。
#main {
width: 0px
height: 0px
border-bottom: 200px solid red
border-left: 200px solid black
border-right: 200px solid blue
border-top: 200px solid pink
}
效果如下图所示：
3.png
2.1.2 矩形
在2.1.1中我们已经实现了通过使用border来实现正方形，那么我们接下来实现一下矩形吧，根据所学过的数学知识我们只需用将正方形的调整正方形的长宽使其长≠宽即可，接下来让我们来实现一下吧。
#main {
width: 0px
height: 0px
border-bottom: 200px solid red
border-left: 100px solid red
border-right: 100px solid red
border-top: 200px solid red
}
效果如下图所示：
4.png
2.1.3 平行四边形
PS：平行四边形的实现需要使用两个三角形来实现，故此这里建议先跳过，请先前往阅读2.2中查看三角形的实现，再折返查看此处的平行四边行的方法。
此处便默认您已阅读完了2.2的内容了，接下来实现一下平行四边形。
<div id="wrapper">
<div class="public"></div>
<div class="public move"></div>
</div>
*{
margin: 0
}
#wrapper {
position: relative
}
.public {
width: 0px
height: 0px
border-bottom: 200px solid red
border-left: 200px solid transparent
border-right: 200px solid transparent
border-top: 200px solid transparent
position: absolute
}
.move {
transform: rotate(180deg)
top: 200px
left: 200px
}
效果如下图所示：
5.png
2.2 三角形
目前为止，最为简单的四边形已完成，那么此时是不是已经有感觉了呢！我们接着往下走，既然border可以实现四边形，那么三角形按道理应该也不在话下，当然三角形里面也有很多很多种类，按照角划分，可分为锐角三角形、直角三角形、钝角三角形；下面分别来实现一下。
2.2.1 锐角三角形
首先我们来看看在content的宽高都是0的情况下，border的left,right,top,bottom四个所占据的情况吧。
#main {
width: 0px
height: 0px
border-bottom: 200px solid red
border-left: 200px solid black
border-right: 200px solid blue
border-top: 200px solid pink
}
效果图如下：
6.png
从图可以看出left,right,top,bottom都是占着一个三角形的情况，那么当我们需要某个三角形时我们只需要让其他三个三角形隐藏起来不就可以了，我们可以用transparent属性值来隐藏border，那么来实现一下吧。
#main {
width: 0px
height: 0px
border-bottom: 200px solid red
border-left: 200px solid transparent
border-right: 200px solid transparent
border-top: 200px solid transparent
}
效果如图所示：
7.png
2.2.2 直角三角形
到此我们可以画出锐角三角形了，直角三角形我们根据上上图可以得到，只要显示两个border边即可，代码试一下吧
#main {
width: 0px
height: 0px
border-bottom: 200px solid red
border-left: 200px solid red
border-right: 200px solid transparent
border-top: 200px solid transparent
}
效果如图所示：
8.png
2.2.3 钝角三角形
上图证实了之前的想法的可行性了。那么接下来让我们想想钝角三角形该怎么实现呢？按照之前的想法是不行的，那么我们就需要改变一下想法。
我们可以用两个直角三角形，将小的直角三角形覆盖在大的上面，让我们试一下吧！！
<div id="main1"></div>
<div id="main2"></div>
#main1 {
width: 0px
height: 0px
border-bottom: 200px solid red
border-left: 200px solid transparent
}
#main2 {
width: 0px
height: 0px
border-bottom: 200px solid black
border-left: 150px solid transparent
position: absolute
/*这里8px是浏览器中的margin自带的间距，之前没有处理*/
top: 8px
left: 58px
}
效果图如下所示：
9.png
这次通过绝对定位来控制小的直角三角形，那么我们可以通过控制黑色三角形的颜色来显示钝角三角形。
2.3 五边形
三角形都已经学会了，那么很多图形都可以通过三角形拼凑得来，就以五边形为例，这里将以多个三角形来画出五边形。
<div id="wrapper">
<div class="main1 tool"></div>
<div class="main2 tool"></div>
<div class="main3 tool"></div>
<div class="main4 tool"></div>
<div class="main5 tool"></div>
</div>
*{
margin: 0
}
#wrapper {
position: relative
top: 300px
margin-left: 300px
}
.main2 {
transform: rotate(72deg)
}
.main3 {
transform: rotate(144deg)
}
.main4 {
transform: rotate(216deg)
}
.main5 {
transform: rotate(288deg)
}
.tool{
width: 0px
height: 0px
border-right: 58px solid transparent
border-left: 58px solid transparent
border-bottom: 160px solid red
position: absolute
top: 0
left: 0
}
效果如下图所示：
10.png
实现五边形的主要难点在于border的三个边的取值，以及旋转的角度。
2.4 六边形
到目前为止三角行、四、五边形的三种形式都实现了一遍，他们均是通过border来实现的，那么让我们来想一下怎么画出一个六边形，有条件的可以在纸上画画，我们可以把一个五边形分成6个等边三角形，让我们通过上面所学知识来实现一下六边形吧！
<div id="wrapper">
<div class="main1 tool"></div>
<div class="main2 tool"></div>
<div class="main3 tool"></div>
<div class="main4 tool"></div>
<div class="main5 tool"></div>
<div class="main6 tool"></div>
</div>
*{
margin: 0
}
#wrapper {
position: relative
top: 300px
margin-left: 300px
}
.main2 {
transform: rotate(60deg)
}
.main3 {
transform: rotate(120deg)
}
.main4 {
transform: rotate(180deg)
}
.main5 {
transform: rotate(240deg)
}
.main6 {
transform: rotate(300deg)
}
.tool{
width: 0px
height: 0px
border-right: calc(60px / 1.732) solid transparent
border-left: calc(60px / 1.732) solid transparent
border-bottom: 60px solid red
transform-origin: top
position: absolute
top: 0
left: 0
}
11.png
通过上面的方法实现五边形，这边难点主要是画出等边三角形。
上面的方法已经实现了，让我们想想其他的方法实现一下吧，这里我们将通过三个四边形实现五边形，让我们一下实验一下吧！！
<div id="wrapper">
<div class="main1 tool"></div>
<div class="main2 tool"></div>
<div class="main3 tool"></div>
</div>
*{
margin: 0
}
#wrapper {
position: relative
top: 300px
margin-left: 300px
}
.main1 {
width: calc(120px / 1.732)
height: 120px
background-color: black
}
.main2 {
width: calc(120px / 1.732)
height: 120px
transform: rotate(120deg)
background-color: black
}
.main3 {
width: calc(120px / 1.732)
height: 120px
transform: rotate(240deg)
background-color: black
}
.tool{
position: absolute
top: 0
left: 0
}
12.png
好了，目前已经讲述了三角形，四边形，五边形，六边形得到实现方式了，更高的实现方式就以此类推了。
原文地址：https://juejin.cn/post/7001772184498601991
作者：执鸢者
更多编程相关知识，请访问：编程入门！！
以上就是css常见问题：如何画多边形（三角形~六边形）的详细内容，更多请关注php中文网其它相关文章！
声明：本文转载于：掘金--执鸢者，如有侵犯，请联系admin@php.cn删除
专题推荐：css多边形三角形四边形五边形六边形
上一篇：深入浅出解析css字体图标的制作和使用（代码分享） 下一篇：自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)
相关文章推荐
• 如何使用HTML5+CSS3动态画一个笑脸
• 炫酷！CSS创建响应式堆叠卡片悬停效果
• 让网站更酷炫的CSS filter使用小技巧，值得收藏！
• 中秋献礼，分享一个CSS日地月公转动画效果！
技术外包，人才推荐
相关课程推荐
CSS3进阶视频教程
《CSS3进阶视频教程》本课程是由北风网录制，CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。
CSS3教程9235次播放
CSS3精讲视频教程
《CSS3精讲视频教程》本课程是由北风网录制，CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。
CSS3教程7348次播放
让布局像5G一样快：CSS Grid网格布局
Grid (网格布局): 在CSS中第一个真正意义上的布局技术, 也是CSS布局的巅峰之作, 彻底告别一维模式, 一步跨入全新的二维空间布局新时代....
CSS教程9249次播放
新独孤九贱之:CSS3 必知内容
CSS3与HTML5构成了页面的基础, 与HTML5相比, CSS3的作用更强大通常我们使用html5书写页面结构,而css3可以帮助我们完成页面元素的样式设置和元素布局,还可以完成一些动画特效
CSS教程7944次播放
最通俗易懂的html+css课程 9天速成
HTML是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
HTML教程13055次播放
首页
视频
直播
社区
我的
HTML5是目前非常主流的web前端开发技术，使用html5我们可以非常快速的完成一个pc端或移动端web应用的开发。《web开发技术》通过基础知识、中小实例、综合案例的方式，介绍了用HTML5+CSS3设计构建网站的必备知识,是从事网页制作、网站建设、web前端开发和移动端网站开发，甚至web app开发的人们必备的专业技能。 通过本课程的学习，学生首先要掌握html5的新增常用标记及其属性、如html5机构化标记、画图标记、多媒体标记、表单标记等。其次，需要进一步了解css3新增的知识点，包括Css3选择器、控制文本、边框、背景、动画、过渡、转换即用户界面设计等。最后，在html5和css3新增内容的基础上，进一步利用html5架构及css3样式的综合应用完成移动端实战项目案例开发，在开发过程中注重案例结构分析及移动端开发特点的经验总结。 课程内容共十二章。第一章主要介绍html5的发展、新标准及新特性，使大家对html5有个初步的了解。第二章至第五章主要介绍html5新增元素及其应用实例，包括html5新增文档结构标签、新增视音频标签、新增表单元素及属性、canvas画图等，这些新增的标签是html5的核心内容，也是本课程的重点知识内容。通过新增元素我们可以掌握如果利用新标准来构建网页结构以及如何结合js相关的api来实现一些web应用的简单控制，如控制视频、音频的播放或暂停，绘制动画等。第六章将简单介绍css3，css3是样式表的最新版本，在这一章我们重点介绍css3的一些新特性。第七章是css3选择器的介绍，css3的一个突出特点就是选择器的扩展，可以实现更简单但是更强大的功能。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的，这些模块包括：背景和边框、文字特效、多栏布局、用户界面、过渡特性、动画、转换等，在第八章至第十一章，将对这些模块进行逐步讲解，这部分所有的内容都是css3的重点内容，虽然难度有所增加但你会发现这部分内容是非常有趣的，几行样式代码就能实现一个网页动画，这部分内容还不值得你期待吗？在最后一张，我们进入项目实战阶段，这里我们介绍两个经典的项目案例，第一个项目是利用html5和css3重构携程网手机端界面，第二个案例是马蜂窝手机端界面。在项目当中，贯穿介绍移动端的一些技术开发特点，如响应式自适应布局、网站规划等，希望可以通过项目实战的分析，提高我们的web开发综合应用能力。1.首先零基础学习前端先要有一个计划，了解前端要学习哪些技术。
2.做好自己的时间规划，如何快速入门前端那肯定是需要不断的提高自己的学习效率，学习过程中尽量把手机调至静音给自己一个安静的学习环境和氛围。
3.快速入门顾名思义肯定是少走弯路，在学习过程中看下自己身边有没有前端这方面的大神尽量多问，多交流，如果是没有的话，可以多去找一些前端的交流群，学习肯定是不能闭门造车。
学习是一个循序渐进的过程，前端的学习也是如此。
不论前端开发还是后端开发的学习都要求我们多动手，既要反复的看书，也把学习到的知识点第一时间去实践。前端的学习入门快要三个月，慢的要 5-6 个月左右，看个人的理解速度来评估，只要入门了不论理解能力，还是学习的速度都会有明显的提升。
在学习前端的过程中，除了要把学到的知识点第一时间去实践，也要在学习的每个阶段自己创建课题，用所学到的知识去实现课题的内容。这样可以更好有助于理解和累计一定的项目经验。
前端的学习从来不是孤军奋战，需要一个前辈的领路，也需要一个平台不断交流和思维碰撞。这样可以快速入门和少走弯路，也能让自己发现问题的根本所在。
阶段一
在学习前端之前呢，你需要一个编辑器，在网上你可以看到很多编辑器用来编写前端，甚至 Windows 系统默认的文本文档也可以作为前端代码的编辑器。俗话说，没有金刚钻怎么揽瓷器活，所以一个好的编辑器很重要，我在这里推荐给大家的编辑器是 VSCode。
思维导图
前端开发工具
一、HTML+CSS
前端的入门门槛是极低的，主要体现在 HTML 和 CSS 部分，运行环境就是浏览器，不像如 Java 需要配置开发/运行环境。
HTML 和 CSS 不是编程语言，HTML 是结构标签，CSS 是结构标签的样式配置。
HTML
属性
事件
标签
字符集
CSS
CSS基础教程
CSS样式
CSS框模型
CSS定位
CSS选择器
CSS高级
思维导图
HTML+CSS以上内容的学习用时 20天左右，再花 2 天的时间项目实践，这部分总花费时间在 22天左右。
二、HTML5+CSS3
HTML5 作为 HTML 的最新版本，引入了多项新技术，大大增强了对于应用的支持能力，使得Web技术不再局限于呈现网页内容。
HTML5 可以使开发者的工作大大简化，理论上单次开发就可以在不同平台借助浏览器运行，降低开发的成本，这也是产业界普遍认为 HTML5 技术的主要优点之一。
CSS3使用了层叠样式表技术，可以对网页布局、字体、颜色、背景灯效果做出控制。css3作为css的进阶版，拆分和增加了盒子模型、列表模块、语言模块 、背景边框 、文字特效 、多栏布局等等。
CSS3的改变有很多，增加了文字特效，丰富了下划线样式，加入了圈重点的功能。在边框方面，有了更多的灵活性，可以更加轻松地操控渐变效果和动态效果等等。在文字效果方面，特意增加了投影。
CSS3在兼容上做了很大的功夫，并且网络浏览器也还将继续支持CSS2，因此原来的代码不需要做太多的改变，只会变得更加地轻松。
HTML5
HTML5视频
HTML5音频
HTML5拖放
HTML5画布
HTML5 SVG
HTML5地理定位
HTML5 Web存储
HTML5 应用缓存
HTML5表单
CSS3
CSS3边框
CSS3背景
CSS3文本效果
CSS3字体
CSS3 2D转换
CSS3 3D 转换
CSS3 过渡
CSS3 动画
CSS3 多列
思维导图
HTML5+CSS以上内容用时 10 天左右，这部分内容是在 HTML+CSS 做的升级改进，只需要了解他们的一些特性即可，再结合这些特性做一些小项目加深学习。
请点击输入图片描述
四、JavaScript
JavaScript 是 web 开发者必学的三种语言之一，这里我们需要区别 JavaScript 和 Java 他们是完全不同的语言，不论是概念还是设计。javascript 部分需要我们学习的知识点如下所示：
认识JavaScript
基本语法
变量
数据类型
字符串
数字
布尔
数组
对象
Null
Undefined
5. 函数
内置函数
自定义哈数
6. 运算符
7. 流程控制
8. DOM对象
String
Array
Date
Boolean
Math
Number
9. BOM对象
WIndow
Navigator
Screen
History
Location
10. 综合实例
思维导图
javascript以上内容的学习用时 35天 左右，这里推荐几本 Javascript 的书籍，如下：
《JavaScript 高级程序设计（第3版）》，俗称红宝书。前七章讲的是语言特性，是重点学习的部分，必须需要反复阅读，直至完全理解为止。DOM、事件流、表单、JSON、Ajax 与最后几章也需要重点学习，这是一些常用的 Web API。至于本书的其余部分大致读一下就可以，不做重点要求。
《JavaScript 语言精粹》，俗称蝴蝶书。很薄的一本书总页数就 147 页，花一天时间就能看完，快的话半天就能看完。这本书虽然很薄，但是承载的内容却非常的丰厚和深入。JavaScript是一门有很多坑的语言，所以这本书”取其精华，去其糟粕“就是精粹了。
《你不知道的 JS》非常精彩的一本书，将 JavaScript 的细节一网打尽。
阶段二
这部分内容是对 JavaScript 的补充学习
四、 Jquery学习
1. 基础语法
2. 选择器
基本选择器
层次选择器
过滤选择器
表单选择器
3. DOM操作
查找节点
创建节点
插入节点
删除节点
复制节点
替换节点
包裹节点
属性操作
样式操作
4. 事件
事件绑定
事件冒泡
5. 动画
show、hide
fadeIn、fadeOut
slideUp、slideDown
自定义动画animate
动画回调以及停止动画
6. 常用工具
浏览器及特性检测
数组和对象操作
Layer UI，主要学习栅格布局，图标，动画，按钮，表单，导航，选项卡，进度条，面板，表格，时间线等
7. Ajax
8. Jquery插件编写
思维导图
请点击输入图片描述
二、其他
JavaScript 进阶
DOM+BOM综合演练
网页特效
ES6 进阶
bootstrap
animate.css学习
请点击输入图片描述
以上内容的学习用时 10天左右
阶段三
这部分是框架和前后端交互技术的学习
一、Vue
Vue基础
模版语法
计算属性侦听器
Class与Style绑定
条件/列表渲染
事件处理
表单输入绑定
组件基础、注册
Prop
自定义事件
2. Vuex
State
Getter
Mutation
Action
Module
3. Vue-router
认识路由
动态路由
嵌套路由
编程式导航
路由组件传参
4. axios
认识axios
全局配置
发送POST、GET请求等
思维导图
请点击输入图片描述
二、React
认识React
React元素渲染
JSX
组件
State
Props
事件处理
条件渲染
列表
组件API
组件声明周期
思维导图
三、Node
基础
console（控制台）
crypto（加密）
debugger（调试器）
fs（文件系统）
http（网络）
os（操作系统）
path（路径）
2. 高级
NPM介绍及使用
MVC模式简介
Express框架学习
链接Mysql
链接Redis
项目实战
思维导图
Node四、webpack
概念
主要讲什么是入口，出口，loader，插件等
2. 入口
单个入口语法
对象语法
常见场景
3. 输出
用法
多个入口起点
高级进阶
4. 模式
development
production
5. loader
实例
配置
6. 插件
剖析
用法
配置
7. 配置
基本配置
多个Target
使用其他语言配置
8. 模块
思维导图
webpack以上内容用时 两个月 左右
阶段四（扩展部分，了解即可）
一、Mysql
阶段一
认识mysql
安装mysql
创建数据库、数据表
学习常用的SQL命令，完成增删查改
2. 阶段二
学习Mysql关联查询，子查询等
学习Mysql常用函数
学习Mysql分组、分页、排序等
3. 阶段三
学习Mysql高级查询
了解存储过程，自定义函数等
了解Mysql配置文件
二、Redis
认识Redis
学习redis的数据类型
redis常用操作
redis事务
思维导图
数据库以上内容用时 7 天左右
阶段五
一、项目管理篇
SVN使用
认识svn
安装
生命周期
启动模式
创建版本库
检出操作
解决冲突
提交操作
版本回退
查看历史
分支
标签
2. GIT使用
认识git
安装配置
工作流程
工作区、暂存区和版本库
创建仓库
基本操作
分支管理
查看历史等
标签
github
二、扩展部分
小程序
1. 了解小程序开发流程
2. 视图容器
view
scroll-view
movable-view
cover-view
cover-image
3. 基础内容
icon
text
rich-text
progress
4. 表单组件
button
checkbox
form
input
label
picker
picker-view
radio
slider
switch
textarea
5. 导航
navigator
function-page-navigator
6. 媒体组件
audio
image
video
camera
live-player
live-pusher
7. 地图（map）
8. 画布（canvas）
9. 开放能力
open-data
web-view
ad
official-account
apicloud（移动app开发）
认识apicloud
开发工具讲解
端API
API对象
设备访问
功能扩展
界面布局
导航菜单
小程序模块
云服务对接
4. 云API
数据云API
统计云API
推送云API
云API SDK
5. 小程序模块使用
三、常用框架使用篇
iview （vue框架）
element ui （vue框架）
echarts (百度图标库)
阿里巴巴开源图标使用
Sass学习
Swiper学习
zoom.js 学习
四、综合项目实战
教务管理系统（node+express+mysql）实现
思维导图
扩展学习部分参考资料：前端学习路线，如何学习前端
