CSS3基础纯CSS制作正五边形的简单方法(九五顶五九)

纯CSS制作正五边形的简单方法(九五顶五九)

关于正五边形,在数学中可以通过尺规作图的方式画出来,而如果要求不是十分严格,也可以通过民间口诀“九五顶五九,八五两边分”的方法画出,在CSS中如果要实现正五边形,可以实现的方法是用一个等腰三角形和一个等腰梯形拼接起来:

下面我也借助“九五顶五九,八五两边分”的方法来实现这个正五边形,关于该口诀的示意图如下:

正五边形-九五顶五九.png

假设我要制作一个边长为100px的正五边形,只需将底160px高59px的等腰三角形以及上底100px下底160px高95px的等腰梯形拼接即可,下面先来做这个三角形(关于三角形的做法原理请点这里):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
div {
 width:0px;height:0px;margin:100px auto;
 border-left:80px solid transparent;
 border-right:80px solid transparent;
 border-bottom:59px solid #08c;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

这里便实现了底为160px,高为59px的等腰三角形,如下图:

CSS五边形1.png

下面再制作一个梯形(关于三角形的做法原理请点这里):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
div {
 width:100px;height:0;margin:100px auto;
 border-left:30px solid transparent;
 border-right:30px solid transparent;
 border-top:95px solid #08c;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

这样就实现了上底为100px,下底为160px,高为95px的等腰梯形,如下图:

CSS五边形2.png

接下来通过设置梯形的伪类属性,即可在梯形的上面拼接一个已经做好的三角形,也就是:

div::before {
 content: " ";width: 0px;height: 0px;
 border-left:80px solid transparent;
 border-right:80px solid transparent;
 border-bottom:59px solid #08c;
}

通过定位的方式将三角形放到梯形的正上方,即可完成这个五边形图案了:

CSS五边形.png

这个五边形图案的整体代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
div {
 width:100px;height:0;margin:100px auto;
 position: relative;
 border-left:30px solid transparent;
 border-right:30px solid transparent;
 border-top:95px solid #08c;
}
div:before {
 content: " ";width: 0px;height: 0px;
 position: absolute;left:-30px;bottom:95px;
 border-left:80px solid transparent;
 border-right:80px solid transparent;
 border-bottom:59px solid #08c;}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/css3/86.html