CSS3六边形的实现
一、独立的一个六边形的实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style>
/*.box{width:300px;height:300px;border: 1px solid #000;}*/
.box1,.box2,.box3,.box4{
width: 200px;
height: 250px;
overflow: hidden;
}
.box1{
visibility: hidden;
transform: rotate(120deg);
}
.box2{
visibility: hidden;
transform: rotate(-60deg);
}
.box3{
transform: rotate(-60deg);
visibility: visible;
background-color: #8d71bf;
}
.box4{
display: block;
position: relative;
}
.box4 a{
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
margin: -25px 0 0 -50px;
border-radius: 3px;
text-align: center;
line-height: 50px;
width: 100px;
height: 50px;
text-decoration: none;
color: #FFC107;
font-size: 18px;
font-weight: bolder;
background: #525c61;
}
</style>
<div class="box">
<div class="box1">
<div class="box2">
<div class="box3">
<div class="box4">
<a href="#">uidhfiauh</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>案例图片：
二、多个六边形的实现
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 实现六边形图片展示效果</title>
<style type="text/css">
body, div, img, ul, li
{
margin: 0;
padding: 0;
}
body
{
font-size: 12px;
background-color: #DDD;
min-width: 1200px;
}
ul, ul li
{
list-style: none;
}
.clear
{
clear: both;
}
.box
{
position: relative;
width: 630px;
margin: 100px auto;
}
.box-top, .box-bottom
{
position: absolute;
visibility: hidden;
}
.box-bottom
{
top: 182px;
left: 105px;
}
.box1, .box2, .box3, .box4
{
width: 200px;
height: 250px;
overflow: hidden;
}
.box1, .box2
{
visibility: hidden;
}
.box1
{
transform: rotate(120deg);
float: left;
margin-left: 10px;
-ms-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
}
.box2
{
transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
}
.box3
{
transform: rotate(-60deg);
background: no-repeat 50% center;
background-size: 125% auto;
-ms-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
visibility: visible;
background: pink;
}
.box4
{
display: block;
position: relative;
}
.box4 a
{
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
margin: -16px 0 0 -16px;
border-radius: 3px;
text-align: center;
line-height: 32px;
width: 32px;
height: 32px;
text-decoration: none;
color: White;
font-size: 18px;
font-weight: bolder;
}
</style>
</head>
<body>
<div class="box">
<div class="box-top">
<div class="box1">
<div class="box2">
<div class="box3">
<div class="box4">
<a href="#">+</a>
</div>
</div>
</div>
</div>
<div class="box1">
<div class="box2">
<div class="box3">
<div class="box4">
<a href="#">+</a>
</div>
</div>
</div>
</div>
<div class="box1">
<div class="box2">
<div class="box3">
<div class="box4">
<a href="#">+</a>
</div>
</div>
</div>
</div>
</div>
<div class="box-bottom">
<div class="box1">
<div class="box2">
<div class="box3">
<div class="box4">
<a href="#">+</a>
</div>
</div>
</div>
</div>
<div class="box1">
<div class="box2">
<div class="box3">
<div class="box4">
<a href="#">+</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>案例图片展示：
