css越来月强大，你知道css可以用来制作六角星吗？让我们一起来看看如何使用纯css制作六角星吧。
内容来自www.wkfxw.com
思路： 六角星 = 向上的三角形 + 向下的三角形。 把一个向上的三角形和一下向下的三角形组合在一起就得到了一个六角星，是不是很神奇呢？
新建一个html文件。
在html文件上创建一个div标签，然后给这个标签添加一个id，后面的样式设置会直接使用这个来设置。如图：
代码：<div id="hexagon"></div>
创建第一个三角形。对上面添加的id设置样式，使得在浏览器上看到一个三角形。如图：
样式代码：
<style type="text/css">
#hexagon {
margin: 120px auto;
position: relative;
display: block;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 150px solid red;
border-left: 100px solid transparent;
}
</style>
保存html文件，使用浏览器打开，即可看到一个向上的三角形效果。如图：
使用伪类:after创建一个向下的三角形，然后使用绝对定位设置这个三角形的位置。如图：
样式代码：
#hexagon:after{
content: "";
position: absolute;
top:50px;
left: -100px;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
border-top: 150px solid red;
}
保存好html文件后使用浏览器打开，接口看到六角星效果。如图：
所有代码。可以直接复制所有代码到html文件上，保存后运行即可看到效果。
所有代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>六角星</title>
<style type="text/css">
#hexagon {
margin: 120px auto;
position: relative;
display: block;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 150px solid red;
border-left: 100px solid transparent;
}
#hexagon:after{
content: "";
position: absolute;
top:50px;
left: -100px;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
border-top: 150px solid red;
}
</style>
</head>
<body>
<div id="hexagon"></div>
</body>
</html>
餐饮管理公司简介
初中英语教学论文
小学家长会课件
应届生面试自我介绍
入党积极分子
Source Insight教程
诺顿防病毒软件