纯CSS从三角形进化到六边形
时间:2023-03-19 09:58:32
科技观察
今天学习一道面试经常考的css题,用css画多边形。这次以三角形、四边形、五边形、六边形为例。在开始之前,您需要了解一些必要的知识。1.基础知识储备本次我们将使用纯CSS知识来绘制一些形状。为了画出这些形状,我们首先要了解一下CSS必备的基础知识——css盒模型。Boxmodel.png从上图可以看出,标准的盒子模型是由content、padding、border、margin组成的。具体情况我们用代码看看。
/*css部分*/#main{width:100px;height:100px;border:200pxsolidred;}效果图如下:2、实战中,不练假动作只能说说而已。现在你可以使用这些基本的CSS属性来绘制常见的三角形、四边形、五边形...2.1如果四边形不能直接使用background-color属性来绘制四边形。从上图我们可以看出,如果内容的宽高都设置为0,同时设置边框的宽高,那么我们就可以得到一个只由边框组成的四边形,而这个四边形就是分为正方形、平行四边形、长方形等。这里,让我们用border来实现以上三种图形。2.1.1正方形让我们先实现最简单的正方形。#main{width:0px;height:0px;border-bottom:200pxsolidred;border-left:200pxsolidblack;border-right:200pxsolidblue;border-top:200pxsolidpink;}效果如下图:2.1.2矩形在2.1.1中我们已经用border实现了正方形,接下来我们来实现矩形。根据我们学过的数学知识,我们只需要调整正方形的长宽,使长≠宽,然后我们来实现一下。width:0px;height:0px;border-bottom:200pxsolidred;border-left:100pxsolidred;border-right:100pxsolidred;border-top:200pxsolidred;}效果如下图:rectangle.png2.1.3平行四边形PS:平行四边形的实现需要用到两个三角形来实现,所以这里建议跳过,请先阅读2.2查看三角形的实现,再回头查看这里的平行四边形方法。这里假设你已经阅读了2.2的内容,然后实现了平行四边形。