css中怎么画多边形

这篇文章主要为大家展示了“css中怎么画多边形”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“css中怎么画多边形”这篇文章吧。

滨城网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设等网站项目制作，到程序开发，运营维护。创新互联于2013年成立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。

一、基础知识储备

css中怎么画多边形

由上图可以看出标准的盒模型是由content，padding，border，margin组成的，我们用代码看一下具体情况吧。

/*css部分*/ 
#main { 
  width: 100px;
  height: 100px;
  border: 200px solid red; 
}

效果图如下：

css中怎么画多边形

二、实战

光说不练假把式，现在就由利用这些基本的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;
}

效果如下图所示：

css中怎么画多边形

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;
}

效果如下图所示：

css中怎么画多边形

2.1.3 平行四边形

PS：平行四边形的实现需要使用两个三角形来实现，故此这里建议先跳过，请先前往阅读2.2中查看三角形的实现，再折返查看此处的平行四边行的方法。

此处便默认您已阅读完了2.2的内容了，接下来实现一下平行四边形。

*{ 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; }

#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; }

#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; }

#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; }

*{ 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; }

*{ 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; }

*{ 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; }