搜索
首页web前端css教程css常见问题:如何画多边形(三角形~六边形)

css常见问题:如何画多边形(三角形~六边形)

Sep 16, 2021 am 10:57 AM
css三角形六边形多边形

利用纯CSS如何画多边形?本篇文章就来给大家介绍一下从纯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 钝角三角形

上图证实了之前的想法的可行性了。那么接下来让我们想想钝角三角形该怎么实现呢?按照之前的想法是不行的,那么我们就需要改变一下想法。

我们可以用两个直角三角形,将小的直角三角形覆盖在大的上面,让我们试一下吧!!

395b2104ac4e57b072ce4fb45c171f2616b28748ea4df4d9c2150843fecfba68
ca8d76bb96de2ae4cbbba732da83979916b28748ea4df4d9c2150843fecfba68
#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删除
@rules具有多少特异性,例如@keyframes和@media?@rules具有多少特异性,例如@keyframes和@media?Apr 18, 2025 am 11:34 AM

前几天我得到了这个问题。我的第一个想法是:奇怪的问题!特异性是关于选择者的,而在符号不是选择器,那么...无关紧要?

您可以嵌套@Media和@support查询吗?您可以嵌套@Media和@support查询吗?Apr 18, 2025 am 11:32 AM

是的,您可以,而且它并不重要。不需要CSS预处理器。它在常规CSS中起作用。

快速吞噬缓存破坏快速吞噬缓存破坏Apr 18, 2025 am 11:23 AM

您应该肯定会在CSS和JavaScript(以及图像和字体以及其他内容)等资产上设置遥远的高速缓存标头。告诉浏览器

寻找可以监视CSS质量和复杂性的堆栈寻找可以监视CSS质量和复杂性的堆栈Apr 18, 2025 am 11:22 AM

许多开发人员写了如何维护CSS代码库的文章,但并没有很多关于如何测量该代码库质量的文章。当然,我们有

数据学家用于建议不执行值的值数据学家用于建议不执行值的值Apr 18, 2025 am 11:08 AM

您是否曾经有一种需要接受简短而任意的文本的表格?喜欢名字或其他。那完全是用的。有很多

苏黎世的最初会议苏黎世的最初会议Apr 18, 2025 am 11:03 AM

我很高兴能前往瑞士苏黎世参加前界(Love the Name and URL!)。我以前从未去过瑞士,所以我很兴奋

使用CloudFlare工人建立全栈无服务器应用程序使用CloudFlare工人建立全栈无服务器应用程序Apr 18, 2025 am 10:58 AM

我在软件开发方面最喜欢的发展之一是无服务器的出现。作为一个倾向于陷入细节的开发人员

在NUXT应用程序中创建动态路由在NUXT应用程序中创建动态路由Apr 18, 2025 am 10:53 AM

在这篇文章中,我们将使用我构建和部署的电子商务商店演示来进行Netlify,以展示如何为传入数据制作动态路线。这是一个公平的

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 个月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前By尊渡假赌尊渡假赌尊渡假赌
威尔R.E.P.O.有交叉游戏吗?
1 个月前By尊渡假赌尊渡假赌尊渡假赌

热工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。