首页 > 代码库 > 使用CSS样式，制作六边形
使用CSS样式，制作六边形
在制作网上中，经常会遇到绘制其它不规则的图形，如六边形，八边形这类的，在复杂的图形，也是由我们的基本图形组成了，如上面的六边形，就是由两个三角形，一个矩形组成。
先看看，如何绘制三角形 ，与四边形。 三角形：
<div class="triangle"></div>
.triangle{
width: 0px;
height: 0px;
border-width: 80px;
border-color:transparent transparent green;
border-style: solid;
}
注： 将宽与高设置为0，设置边框的宽度，及样式的样式，最后将上，左，右边的边框，设置成透明色，这样我们就可以得到想到的三角形。
如图： 
四边形：
与三角形设置类似，不同的是，需要设置div的宽度，我们需要一个小的四边形与一个大的四边形，改变宽度的大小即可：
<div class="fourangle"></div>
<div class="fourangle2"></div>
.fourangle{
width: 70px;
height: 0px;
border-width: 80px;
border-color:transparent transparent green;
border-style: solid;
}
.fourangle2{
width: 100px;
height: 0px;
border-width: 80px;
border-color:transparent transparent green;
border-style: solid;
}
效果如图：
完整六边形代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#shape{
margin: 200px 0px 0px 200px;
position: relative;
width: 300px;
height: 500px;
/*border: 1px solid red;*/
overflow: hidden;
background-image: url("img/bg/bg1.png");
background-position: center;
}
#div1{
position: absolute;
top:-150px;
width: 0px;
height: 0px;
border-width: 150px;
border-color:white white transparent;
border-style: solid;
}
#rect{
/*border: 1px solid green;*/
position: absolute;
top:150px;
width: 300px;
height: 200px;
}
#div2{
position: absolute;
top:350px;
width: 0px;
height: 0px;
border-width: 150px;
border-color:transparent white;
border-style: solid;
}
</style>
</head>
<body>
<div id="shape">
<div id="div1"></div>
<div id="rect"></div>
<div id="div2"></div>
</div>
</body>
</html>
使用CSS样式，制作六边形