当前位置: 首页 > 科技观察

纯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的内容,然后实现了平行四边形。
*{margin:0;}#wrapper{position:relative;}.public{width:0px;height:0px;border-bottom:200pxsolidred;border-left:200pxsolidtransparent;border-right:200pxsolidtransparent;border-top:200pxsolidtransparent;position:absolute;}.move{transform:rotate(180deg);top:200px;left:200px;}效果如下图所示:截图2.2三角形至此,最简单的四边形就完成了,那么你此时有没有感觉呢!继续说吧,既然边框可以实现四边形,那么三角形应该没问题。当然,三角形有很多种。按角度可分为锐角三角形、直角三角形和钝角三角形。让我们分别实现它们。2.2.1锐角三角形首先我们看一下当内容的宽和高都为0时,边框的左、右、上、下被占用的情况。#main{width:0px;height:0px;border-bottom:200pxsolidred;border-left:200pxsolidblack;border-right:200pxsolidblue;border-top:200pxsolidpink;}效果图如下:从图中我们可以看到左边,right,top,bottom占据了一个三角形,所以当我们需要某个三角形的时候,只需要隐藏其他三个三角形即可。我们可以使用transparent属性值来隐藏边框,下面我们来实现一下。#main{width:0px;height:0px;border-bottom:200pxsolidred;border-left:200pxsolidtransparent;border-right:200pxsolidtransparent;border-top:200pxsolidtransparent;}效果如图:2.2.2直角三角形这里我们可以画一个锐角三角形。我们可以根据上图得到一个直角三角形。只显示两个边界边。让我们试试代码。#main{width:0px;height:0px;border-bottom:200pxsolidred;border-left:200pxsolidred;border-right:200pxsolidtransparent;border-top:200pxsolidtransparent;}效果如图:2.2.3钝角三角形上图证实了之前想法的可行性。那么我们来思考一下钝角三角形是如何实现的呢?按照以前的想法是行不通的,所以我们要换个思路。我们可以用两个直角三角形,把小的直角三角形放在大的直角三角形上面,我们试试吧!!#main1{width:0px;height:0px;border-bottom:200pxsolidred;border-left:200pxsolidtransparent;}#main2{width:0px;height:0px;border-bottom:200pxsolidblack;border-left:150pxsolidtransparent;position:absolute;/*这里8px是浏览器中自带的margin的间距,之前没有处理过*/top:8px;left:58px;}效果图如下:这次用绝对定位控制了直角小三角,然后我们可以通过控制黑色三角形的颜色来显示钝角三角形。2.3五边形和三角形都学过,所以可以通过三角形拼出很多图形。以五边形为例。这里我们将使用多个三角形来绘制五边形。*{margin:0;}#wrapper{position:relative;top:300px;margin-left:300px;}.main2{transform:rotate(72deg);}.main3{变换:旋转(144度);}.main4{变换:旋转(216度);}.main5{变换:旋转(288度);}.工具{宽度:0px;高度:0px;右边框:58pxsolidtransparent;border-left:58pxsolidtransparent;border-bottom:160pxsolidred;position:absolute;top:0;left:0;}效果如下图:pentagon.png五边形的实现主要难点在于三个边框边的值,和旋转的角度。2.4六边形至此已经实现了三角排、四边形、五边形三种形式。它们都是通过边界实现的。那么让我们想想如何画一个六边形。有条件你可以在纸上画画,我们可以把一个五边形分成6个等边三角形,让我们用上面的知识来实现??一个六边形吧!*{margin:0;}#wrapper{position:relative;top:300px;margin-left:300px;}.main2{变换:旋转(60度);}。main3{变换:旋转(120度);}.main4{变换:旋转(180度);}.main5{变换:旋转(240度);}.main6{变换:旋转(300度);}.工具{宽度:0px;高度:0px;右边框:calc(60px/1.732)solidtransparent;border-left:calc(60px/1.732)solidtransparent;border-bottom:60pxsolidred;transform-origin:top;position:absolute;top:0;left:0;}通过上面的方法来实现五边形,这里的难点主要是画一个等边三角形。上面的方法已经实现了,让我们想想其他的实现方式,这里我们通过三个四边形来实现五边形,我们来实验一下!!*{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;}好了,上面已经介绍了三角形、四边形、五边形、六边形的实现方法,更高层的实现方法可以类推。