| 标题 | 纯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> |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。