以下是 css3实现六角形效果 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>css3实现六角形效果</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="container">
<div class="hex hex-1 hex-gap">
<div class="inner">
<h4>HOME</h4>
<hr />
<p>Home Sweet Home</p>
</div>
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex hex-2">
<div class="inner">
<h4>ABOUT US</h4>
<hr />
<p>We Are The Experts</p>
</div>
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex hex-3">
<div class="inner">
<h4>CONTACT US</h4>
<hr />
<p>We Open Everyday</p>
</div>
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex" style="background-image: url(images/2.jpg);">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex" style="background-image: url(images/3.jpg);">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex" style="background-image: url(images/4.jpg);">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex" style="background-image: url(images/5.jpg);">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex hex-gap" style="background-image: url(images/6.jpg);">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex" style="background-image: url(images/7.jpg);">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex" style="background-image: url(images/8.jpg);">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex" style="background-image: url(images/9.jpg);">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex" style="background-image: url(images/10.jpg);">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex" style="background-image: url(images/11.jpg);">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex" style="background-image: url(images/12.jpg);">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex hex-gap" style="background-image: url(images/13.jpg);">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
<div class="hex" style="background-image: url(images/14.jpg);">
<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
</div>
</body>
</html>
CSS代码(styles.css):
body{font-family:arial;font-size:12px;background:#f6f7f0;margin:0;padding:0;}
#info{background:#333;opacity:0.8;position:absolute;top:5px;right:5px;width:280px;color:#fff;border-radius:5px;z-index:10}
#info p{padding:0 10px;}
a{text-decoration:none;color:#3e8ed7;}
a:hover{color:#61b7e6;}
.container{width:700px;height:100%;position:absolute;top:50px;left:50%;margin-left:-350px;}
/* HEXAGON STARTS HERE */
.hex{width:150px;height:86px;background-color:#ccc;background-repeat:no-repeat;background-position:50% 50%;-webkit-background-size:auto 173px;-moz-background-size:auto 173px;-ms-background-size:auto 173px;-o-background-size:auto 173px;position:relative;float:left;margin:25px 5px;text-align:center;zoom:1;}
.hex.hex-gap{margin-left:86px;}
.hex a{display:block;width:100%;height:100%;text-indent:-9999em;position:absolute;top:0;left:0;}
.hex .corner-1,.hex .corner-2{position:absolute;top:0;left:0;width:100%;height:100%;background:inherit;z-index:-2;overflow:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden;}
.hex .corner-1{z-index:-1;-webkit-transform:rotate(60deg);-moz-transform:rotate(60deg);-ms-transform:rotate(60deg);-o-transform:rotate(60deg);transform:rotate(60deg);}
.hex .corner-2{-webkit-transform:rotate(-60deg);-moz-transform:rotate(-60deg);-ms-transform:rotate(-60deg);-o-transform:rotate(-60deg);transform:rotate(-60deg);}
.hex .corner-1:before,.hex .corner-2:before{width:173px;height:173px;content:'';position:absolute;background:inherit;top:0;left:0;z-index:1;background:inherit;background-repeat:no-repeat;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden;}
.hex .corner-1:before{-webkit-transform:rotate(-60deg) translate(-87px,0px);-moz-transform:rotate(-60deg) translate(-87px,0px);-ms-transform:rotate(-60deg) translate(-87px,0px);-o-transform:rotate(-60deg) translate(-87px,0px);transform:rotate(-60deg) translate(-87px,0px);-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0;}
.hex .corner-2:before{-webkit-transform:rotate(60deg) translate(-48px,-11px);-moz-transform:rotate(60deg) translate(-48px,-11px);-ms-transform:rotate(60deg) translate(-48px,-11px);-o-transform:rotate(60deg) translate(-48px,-11px);transform:rotate(60deg) translate(-48px,-11px);bottom:0;}
/* Custom styles*/
.hex .inner{color:#eee;}
.hex h4{font-family:'Josefin Sans',sans-serif;margin:0;}
.hex hr{border:0;border-top:1px solid #eee;width:60%;margin:15px auto;}
.hex p{font-size:16px;font-family:'Kotta One',serif;width:80%;margin:0 auto;}
.hex.hex-1{background:#74cddb;}
.hex.hex-2{background:#f5c53c;}
.hex.hex-3{background:#80b971;}
分享到QQ
分享到微博
微信扫一扫
