div旋转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.hexHead {
width:80px;
height:138px;
background-color: chartreuse;
-webkit-transform: rotate(60deg); <!--这里旋转60度-->
margin-left: 48px;
}
.hexCenter {
width:80px;
height:138px;
background-color: chartreuse;
margin-left: 48px;
margin-top:-138px;
}
.hexBottom {
width:80px;
height:138px;
background-color: chartreuse;
-webkit-transform: rotate(-60deg);
margin-left: 48px;
margin-top:-138px;
}
</style>
</head>
<body>
<div>
<div class="hexHead"></div>
<div class="hexCenter"></div>
<div class="hexBottom"></div>
</div>
</body>
</html>
控制边框
<html>
<head>
<title>Draw Hive</title>
</head>
<style type="text/css">
.hiveTop {
width: 0;
border: 30px solid #6C6;
border-top: none;
border-bottom: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
}
.hiveCenter {
width: 104px;
height: 60px;
background-color: #6C6;
}
.hiveBottom {
width: 0;
border: 30px solid #6C6;
border-bottom: none;
border-top: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
}
</style>
<body>
<div>
<div class="hiveTop">
</div>
<div class="hiveCenter">
</div>
<div class="hiveBottom">
</div>
</div>
</body>
</html>
css实现
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>六边形</title>
<style>
.wrap {
margin: 100px;
width: 303px;
}
.nav {
width: 100px;
height: 58px;
background: #339933;
display: inline-block;
position: relative;
line-height: 58px;
text-align: center;
color: #ffffff;
font-size: 14px;
text-decoration: none;
float: left;
margin-top: 31px;
margin-right: 1px;
}
.nav s {
width: 0;
height: 0;
display: block;
overflow: hidden;
position: absolute;
border-left: 50px dotted transparent;
border-right: 50px dotted transparent;
border-bottom: 30px solid #339933;
left: 0px;
top: -30px;
}
.nav b {
width: 0;
height: 0;
display: block;
overflow: hidden;
position: absolute;
border-left: 50px dotted transparent;
border-right: 50px dotted transparent;
border-top: 30px solid #339933;
bottom: -30px;
left: 0px;
}
.a0 {
margin-left: 100px;
}
.a1 {
margin-left: 50px;
}
.nav:hover {
background: #8CBF26;
color: #333333;
}
.nav:hover s {
border-bottom-color: #8CBF26;
}
.nav:hover b {
border-top-color: #8CBF26;
}
</style>
</head>
<body>
<div class="wrap">
<a class="nav a0" target="_blank" href="#"><s></s>广播<b></b></a>
</div>
</body>
</html>
图就不展示了，就结果而言，三者都可以产生六边形的按钮，但是显而易见第三种更适合用来做为按钮使用。
第一种：要用到三个div，需添加多个相同超链接才能够达到覆盖整个六边形的目的 第二种：上下两个div宽度全是0，且也是三个div 第三种：方便易用，但是是用绝对定位处理的，这可能在后期调整上对于像我这种前端苦手而言或许会带来一些苦难QAQ