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

纯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;}好了，上面已经介绍了三角形、四边形、五边形、六边形的实现方法，更高层的实现方法可以类推。

纯CSS从三角形进化到六边形相关文章
最新推荐
猜你喜欢

Copyright © 2012-2022 程序源 版权所有豫ICP备2022028201号

重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。