| 标题 | 纯css绘制蜂巢六边形效果 |
| 范文 | 纯css绘制的六边形 代码如下: <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> |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。