技术文章 >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次播放
首页
视频
直播
社区
我的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>css graph</title>
<style type="text/css" media="screen">
/*五边形*/
#pentagon {
position: relative
width: 54px
border-width: 50px 18px 0
border-style: solid
border-color: #f66 transparent
margin: 50px 0px 20px 20px
}
#pentagon:before {
content: ""
position: absolute
height: 0
width: 0
top: -85px
left: -18px
border-width: 0 45px 35px
border-style: solid
border-color: transparent transparent #f66
}
/*六边形*/
#hexagon {
width: 100px
height: 55px
background: #f66
position: relative
margin: 50px 0px 50px 20px
}
#hexagon:before {
content: ""
position: absolute
top: -25px
left: 0
width: 0
height: 0
border-left: 50px solid transparent
border-right: 50px solid transparent
border-bottom: 25px solid #f66
}
#hexagon:after {
content: ""
position: absolute
bottom: -25px
left: 0
width: 0
height: 0
border-left: 50px solid transparent
border-right: 50px solid transparent
border-top: 25px solid #f66
}
/*八边形*/
#octagon {
width: 100px
height: 100px
background: #f66
position: relative
}
#octagon:before {
content: ""
position: absolute
top: 0
left: 0
border-bottom: 29px solid #f66
border-left: 29px solid #fff
border-right: 29px solid #fff
width: 42px
height: 0
}
#octagon:after {
content: ""
position: absolute
bottom: 0
left: 0
border-top: 29px solid #f66
border-left: 29px solid #fff
border-right: 29px solid #fff
width: 42px
height: 0
}
</style>
</head>
<body>
<span style="font-size:27px">CSS graph</span>
<div id="pentagon"></div>五边形<br />
<div id="hexagon"></div>六边形<br />
<div id="octagon"></div>八边形<br />
</body>
</html>
制作圆形：要使用CSS来制作一个圆形，我们需要一个div，被给它设置一个ID
<div id="circle"></div>
圆形在设置CSS时要设置宽度和高度相等，然后设置border-radius属性为宽度或高度的一半即可：
#circle {
width: 120px
height: 120px
background: #7fee1d
-moz-border-radius: 60px
-webkit-border-radius: 60px
border-radius: 60px
}
2
制作椭圆形：
椭圆形是正圆形的一个变体，同样使用一个带ID的div来制作
<div id="oval"></div>
设置椭圆形的CSS时，高度要设置为宽度的一半，border-radius属性也要做相应的改变：
#oval {
width: 200px
height: 100px
background: #e9337c
-webkit-border-radius: 100px / 50px
-moz-border-radius: 100px / 50px
border-radius: 100px / 50px
}
3
制作三角形：
要创建一个CSS三角形，需要使用border，通过设置不同边的透明效果，我们可以制作出三角形的现状。另外，在制作三角形时，宽度和高度要设置为0。
<div id="triangle"></div>
#triangle {
width: 0
height: 0
border-bottom: 140px solid #fcf921
border-left: 70px solid transparent
border-right: 70px solid transparent
}
4
制作倒三角形：
与正三角形不同的是，倒三角形要设置的是border-top、border-left和border-right三条边的属性：
#triangle {
width: 0
height: 0
border-top: 140px solid #20a3bf
border-left: 70px solid transparent
border-right: 70px solid transparent
}
5
制作左三角形：
左三角形操作的是border-top、border-left和border-right三条边的属性，其中上边和下边要设置透明属性。
#triangle_left {
width: 0
height: 0
border-top: 70px solid transparent
border-right: 140px solid #6bbf20
border-bottom: 70px solid transparent
}
制作菱形
制作菱形的方法有很多种。这里使用的是transform属性和rotate相结合，使两个正反三角形上下显示。
#diamond {
width: 120px
height: 120px
background: #1eff00
/* Rotate */
-webkit-transform: rotate(-45deg)
-moz-transform: rotate(-45deg)
-ms-transform: rotate(-45deg)
-o-transform: rotate(-45deg)
transform: rotate(-45deg)
/* Rotate Origin */
-webkit-transform-origin: 0 100%
-moz-transform-origin: 0 100%
-ms-transform-origin: 0 100%
-o-transform-origin: 0 100%
transform-origin: 0 100%
margin: 60px 0 10px 310px
}
制作梯形：
梯形是三角形的一个变体，设置CSS梯形时，左右两条边设置为相等，并且给它设置一个宽度。
#trapezium {
height: 0
width: 120px
border-bottom: 120px solid #ec3504
border-left: 60px solid transparent
border-right: 60px solid transparent
}
制作平行四边形：
平行四边形的制作方式是使用transform属性使长方形倾斜一个角度。
#parallelogram {
width: 160px
height: 100px
background: #8734f7
-webkit-transform: skew(30deg)
-moz-transform: skew(30deg)
-o-transform: skew(30deg)
transform: skew(30deg)
}
星形：
星形的HTML结构同样使用一个带ID的空div。星形的实现方式比较复杂，主要是使用transform属性来旋转不同的边。仔细体会下面的代码。
#star {
width: 0
height: 0
margin: 50px 0
color: #fc2e5a
position: relative
display: block
border-right: 100px solid transparent
border-bottom: 70px solid #fc2e5a
border-left: 100px solid transparent
-moz-transform: rotate(35deg)
-webkit-transform: rotate(35deg)
-ms-transform: rotate(35deg)
-o-transform: rotate(35deg)
}
#star:before {
height: 0
width: 0
position: absolute
display: block
top: -45px
left: -65px
border-bottom: 80px solid #fc2e5a
border-left: 30px solid transparent
border-right: 30px solid transparent
content: ''
-webkit-transform: rotate(-35deg)
-moz-transform: rotate(-35deg)
-ms-transform: rotate(-35deg)
-o-transform: rotate(-35deg)
}
#star:after {
content: ''
width: 0
height: 0
position: absolute
display: block
top: 3px
left: -105px
color: #fc2e5a
border-right: 100px solid transparent
border-bottom: 70px solid #fc2e5a
border-left: 100px solid transparent
-webkit-transform: rotate(-70deg)
-moz-transform: rotate(-70deg)
-ms-transform: rotate(-70deg)
-o-transform: rotate(-70deg)
}
六角星形：
和五角星的制作方法不同，六角星形状的制作方法是操纵border属性来制作两半图形，然后合并它们。
#star_six_points {
width: 0
height: 0
display: block
position: absolute
border-left: 50px solid transparent
border-right: 50px solid transparent
border-bottom: 100px solid #de34f7
margin: 10px auto
}
#star_six_points:after {
content: ""
width: 0
height: 0
position: absolute
border-left: 50px solid transparent
border-right: 50px solid transparent
border-top: 100px solid #de34f7
margin: 30px 0 0 -50px
}
六边形：
六边形的制作方法可以有很多种，可以像五边形一样，先制作一个长方形，然后在它的上面和下面各放置一个三角形。
#hexagon {
width: 100px
height: 55px
background: #fc5e5e
position: relative
margin: 10px auto
}
#hexagon:before {
content: ""
width: 0
height: 0
position: absolute
top: -25px
left: 0
border-left: 50px solid transparent
border-right: 50px solid transparent
border-bottom: 25px solid #fc5e5e
}
#hexagon:after {
content: ""
width: 0
height: 0
position: absolute
bottom: -25px
left: 0
border-left: 50px solid transparent
border-right: 50px solid transparent
border-top: 25px solid #fc5e5e
}
心形：
心形的制作是非常复杂的，可以使用伪元素来制作，分别将伪元素旋转不同的角度，并修改transform-origin属性来元素的旋转中心点。
#heart {
position: relative
}
#heart:before,#heart:after {
content: ""
width: 70px
height: 115px
position: absolute
background: red
left: 70px
top: 0
-webkit-border-radius: 50px 50px 0 0
-moz-border-radius: 50px 50px 0 0
border-radius: 50px 50px 0 0
-webkit-transform: rotate(-45deg)
-moz-transform: rotate(-45deg)
-ms-transform: rotate(-45deg)
-o-transform: rotate(-45deg)
transform: rotate(-45deg)
-webkit-transform-origin: 0 100%
-moz-transform-origin: 0 100%
-ms-transform-origin: 0 100%
-o-transform-origin: 0 100%
transform-origin: 0 100%
}
#heart:after {
left: 0
-webkit-transform: rotate(45deg)
-moz-transform: rotate(45deg)
-ms-transform: rotate(45deg)
-o-transform: rotate(45deg)
transform: rotate(45deg)
-webkit-transform-origin: 100% 100%
-moz-transform-origin: 100% 100%
-ms-transform-origin: 100% 100%
-o-transform-origin: 100% 100%
transform-origin: 100% 100%
}
蛋形：
蛋形时椭圆形的一个变体，它的高度要比宽度稍大，并且设置正确的border-radius属性即可以制作出一个蛋形。
#egg {
width: 136px
height: 190px
background: #ffc000
display: block
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%
}
无穷符号：
无穷符号可以通过border属性和设置伪元素的角度来实现。
#infinity {
width: 220px
height: 100px
position: relative
}
#infinity:before,#infinity:after {
content: ""
width: 60px
height: 60px
position: absolute
top: 0
left: 0
border: 20px solid #06c999
-moz-border-radius: 50px 50px 0
border-radius: 50px 50px 0 50px
-webkit-transform: rotate(-45deg)
-moz-transform: rotate(-45deg)
-ms-transform: rotate(-45deg)
-o-transform: rotate(-45deg)
transform: rotate(-45deg)
}
#infinity:after {
left: auto
right: 0
-moz-border-radius: 50px 50px 50px 0
border-radius: 50px 50px 50px 0
-webkit-transform: rotate(45deg)
-moz-transform: rotate(45deg)
-ms-transform: rotate(45deg)
-o-transform: rotate(45deg)
transform: rotate(45deg)
}
消息提示框：
消息提示框可以先制作一个圆角矩形，然后在需要的地方放置一个三角形。
#comment_bubble {
width: 140px
height: 100px
background: #088cb7
position: relative
-moz-border-radius: 12px
-webkit-border-radius: 12px
border-radius: 12px
}
#comment_bubble:before {
content: ""
width: 0
height: 0
right: 100%
top: 38px
position: absolute
border-top: 13px solid transparent
border-right: 26px solid #088cb7
border-bottom: 13px solid transparent
}
步骤阅读
