- <html>
- <head>
- <title>Draw Hive</title>
- </head>
- <style type="text/CSS">
- .hexagon {
- display: inline;
- float: left;
- }
- #second {
- margin-left: 4px;
- }
- #third {
- clear: left;
- margin-left: 54px;
- margin-top: -28px;
- }
- .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 class="hexagon" id="first">
- <div class="hiveTop">
- </div>
- <div class="hiveCenter">
- </div>
- <div class="hiveBottom">
- </div>
- </div>
- <div class="hexagon" id="second">
- <div class="hiveTop">
- </div>
- <div class="hiveCenter">
- </div>
- <div class="hiveBottom">
- </div>
- </div>
- <div class="hexagon" id="third">
- <div class="hiveTop">
- </div>
- <div class="hiveCenter">
- </div>
- <div class="hiveBottom">
- </div>
- </div>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/090520133213.html
来源: http://www.codesnippet.cn/detail/090520133213.html