专栏首页算法与编程之美前端|如何用HTML打印一个六边形

前端|如何用HTML打印一个六边形

问题描述

六边形在我们网页的制作中,运用得并不是特别广泛。但在一些制作精美,要求创新的一些网页上,我们还是不难看到六边形的身影,如下图1.1所示。用六边形组合的蜂窝状图形,相对来说可能运用的范围应该是最广的。下面我们就来介绍一下如何用HTML打印六边形吧。

图1.1六边形运用展示

解决方案

一个六边形我们可以看成是由两个相等的三角形和一个矩形构成。我们可以通过设置css样式的形式进行打印。将每一部分设置成一个div,对其位置,颜色等进行设置。三角形的设置我们可以将其宽与高设置为0,设置边框的宽度,及样式的样式,最后将上,左,右边的边框,设置成透明色(因为浏览器的显示原因,我们可以直接将颜色设置成白色),这样我们就可以得到想到的三角形。(这里得到的六边形并不是一个正六边形,如果想要得到一个正六边形,可以修改一些数据的值和一些图形的位置。)

如下表所示是一些主要代码:

<style type="text/css"> #shape{ margin: 200px 0px 0px 200px; position: relative; width: 300px; height: 500px; border: 1px solid white; overflow: hidden; background-image: url("img/b9a5cbdce3c2b1a72470685a2106f98e.jpg"); border-color:white ; } #A{ position: absolute; top:-150px; width: 0px; height: 0px; border-width: 150px; border-color:white white deepskyblue; border-style: solid; } #B{ border: 1px solid deepskyblue; position: absolute; top:150px; width: 300px; height: 200px; color:deepskyblue; } #C{ position: absolute; top:350px; width: 0px; height: 0px; border-width: 150px; border-color:deepskyblue white; border-style: solid; } </style></head>

图2.1六边形

除了上述方法,我们也可以利用transform属性来实现六边形的打印。而且利用这种方法的打印可能相对来说更简单,打印出来的图形也不需要太多的数值设 置就可以更好看。(transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理。)那么了解了单个六边形是如何打印的之后,那么怎样打印出由六边形组成的蜂窝状图形呢。我们可以用无序列表嵌套的方式,完成相应的打印。

ul{ margin:0; padding:0; } ul{ list-style:none; width:600px; margin:100pxauto; } li{ float:left; margin:08px; height:100px; } .hex{ overflow:hidden; display:block; width:100px; height:120px; transform: rotate(-60deg) skewY(30deg); } .hexIn{ background-color:darkgray; display:block; width:100px; height:120px; line-height:120px; text-align: center; transform: skewY(-30deg) rotate(60deg); } </style> </head> <body> <ul> <li> <span class="hex"><span class="hexIn"></span></span> </li> <li> <span class="hex"><span class="hexIn"></span></span> </li> <li> <span class="hex"><span class="hexIn"></span></span> </li> </ul> </body>

图2.2六边形

结语

对于蜂窝状图形的打印,其中代码有一句是:transform: rotate(-60deg) skew(30deg)。其中Deg是表示倾斜角度的单位。Rotate表示旋转,skew倾斜。

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:刘连

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序|利用for循环解决内容变更问题

    学习小程序的小伙伴可能会有这样的问题:微信小程序的页面内容要发生改变,在小程序中如何快速的来创造一个格式相同,但仅仅改变内容且易于改变的页面呢?接下来就来解决这...

    算法与编程之美
  • 如何设计一个简单的网站首页

    网站首页是一个网站的入口网页。对于一个网站的了解往往是通过他的首页。首页的主要作用就是引导互联网用户浏览网站其他部分的内容。网站首页上展现的这部分内容一般被认为...

    算法与编程之美
  • 微信小程序|标签页内容完善

    在我们浏览类似一个电影信息页面时,会遇到进行多个页面多种选择情况,每个标签栏都对应不同信息的情况,而其中图文组合布局、九宫格布局、以及搜索框都是必不可少的。

    算法与编程之美
  • wordpress后台登录界面美化

    @font-face { font-family:fzz; src: url('https://img.zmki.cn/ttf/fzz.ttf'); } ...

    AlexTao
  • 使用ThingJS在线开发完成3D地图自定义效果

    好看的3D地图搭建出来,一定是要能为开发者所用与业务系统开发中才能真正地体现价值。基因于此,CityBuilder建立了与ThingJS的通道——直转Thing...

    要不要吃火锅
  • wordpress美化-文章标题样式美化

    找到当前主题的标题样式,然后去主题样式文件修改。(一般在主题根目录style.css)

    AlexTao
  • HTML和css入门作业

    小闫同学啊
  • IOS下box-shadow的诡异bug的修复

    先说环境,我测试了两台IOS手机,iphone 8 ios 11.4.1 和 iphone 6s plus ios 11.4.1,都存在这个诡异的bug。

    用户1515472
  • 一个CSS画的灰太狼,IE下属于重口味,慎看!

    还有几个不错的,比如一个小日本制作的多啦A梦,一个Twitter的当机页面等等,大家可以搜下看看.不得不感叹做前端的哥们闲起来还真是可怕啊.Firefox是正常...

    练小习
  • 转一个css3绘制的iPhone6

    css3绘制的iPhone6 <!DOCTYPE html> <html> <head> <title></title> <style type...

    练小习

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动