python蜂窝状六边形_CSS-蜂窝状展示区域（多个六边形）的一种实现方式

网上已经有很多关于正六边形的CSS画法，主要是利用一个矩形和前后的两个三角形组合而成。

之前在看四维图新的官网的时候，发现了一种六边形的画法，比较适合多排六边形组合成蜂窝状的展示区域(注：四维图新现在改成了上面说的那种画法了)。

示意图：

1、HTML结构

每个li里包着.hex和.hexIn。.hexIn是内容区，.hex是一个菱形切割区，将.hexIn切割成六边形。具体看css。

2、CSS

ul {

margin: 0;

padding: 0;

}

ul {

list-style: none;

width: 560px;

margin: 100px auto;

}

li {

float: left;

margin: 0 5px;

height: 96px;

}

.hex {

overflow: hidden;

display: block;

width: 100px;

height: 116px;

transform: rotate(-60deg) skewY(30deg);

}

.hexIn {

background-color: #ccc;

display: block;

width: 100px;

height: 116px;

line-height: 116px;

text-align: center;

transform: skewY(-30deg) rotate(60deg);

}

li:nth-child(9n + 6) {

margin-left: 60px;

}

里面有几个关键的长度和宽度：

li的宽度，li的宽度由内部元素撑开。

li的高度，多排六边形的情况下，li的高度与排与排之间的间隙有关。

.hex的宽度，即六边形平行边之间的距离。

.hex的高度，六边形对应顶点间的距离。

.hexIn的高度和宽度同.hex。

.hexIn区域如图：

.hex区域如图：

li区域如图：

根据以上的宽度和高度说明，以上数值都要满足一定的关系，直接说结论：

假设需要平行边距离为w的六边形，每个六边形之间的间隔为m。

那么：

li的高度：0.866(w+m)

.hex的宽度：w，高度：1.155w

.hexIn同上

如果第一排有x个六边形，那么为实现相邻两排交错排列的效果，需要设置：li:nth(`x + x - 1`n + `x + 1`) { margin-left: 0.5(w+2m) }。比如第一排有6个，那么li:nth(11n+7) { ... }.

3、实现效果图

python蜂窝状六边形_CSS-蜂窝状展示区域（多个六边形）的一种实现方式相关推荐

python数据加载常规教程_Python加载数据的5种不同方式(收藏)
数据是数据科学家的基础,因此了解许多加载数据进行分析的方法至关重要.在这里,我们将介绍五种Python数据输入技术,并提供代码示例供您参考. 作为初学者,您可能只知道一种使用p andas.read_ ...
python怎么输出所有奇数_python输出100以内奇数的几种输出方式-Go语言中文社区
自从看了一些Python的一些基础语言之后,发现Python这门语言还是蛮有趣啊,很多计算用Python效率还是蛮高啊,几行就搞定了.比方说输出100以内的奇数,用其他语言,可能都是先for循环遍历1 ...
python爬虫源码附注解_Python爬虫遇到验证码的几种处理方式，文章末尾有源码
最近事情其实挺多了,打了一下蓝桥杯的比赛, 还在准备着一些证书的考试, 关于爬虫之类的博客都搁着了一段时间了, 关于我自己确实有点退步了, 实属不该, 其实我自己也是在想, 大三了,到底我是要去考研, ...
python一个图画两条曲线_烦恼如何用python同一图里画多数据曲线吗？教你6种解法...
概要: python的matplotlib作图很强大,本文教你用6种不同方式解决将多种数据曲线画到一起. 问题: 今天,老板又要一个数据报表,小明选择用 python来实现."用matplo ...
使用 Python 的基于边缘和基于区域的分割
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达在这篇文章中,我将重点介绍基于边缘和基于区域的分割技术,在进入细节 ...
Python批量裁剪图形外围空白区域-续
一.基本描述批量裁剪掉图片的背景区域,一般是白色背景,从而减少背景值的干扰和减少存储空间. 原文链接:Python批量裁剪图形外围空白区域原文是通过检索所有图片的最小裁剪区域坐标值,然后再对图片进 ...
python 爬虫及数据可视化展示
python 爬虫及数据可视化展示学了有关python爬虫及数据可视化的知识,想着做一些总结,加强自己的学习成果,也能给各位小伙伴一些小小的启发. 1.做任何事情都要明确自己的目的,想要做什么,打算 ...
基于UE4/Unity绘制地图 - 确定展示区域
前言基于UE4/Unity绘制地图基础元素-线基于UE4/Unity绘制地图基础元素-面和体基础知识在研究清楚如何绘制地图的线面体之后,接下来需要确定需要展示的地图区域了. 地图可以看成是一个 ...
python实现黄金分割搜索算法+动态展示
python实现黄金分割搜索算法+动态展示前言要求黄金分割搜索算法原理伪代码代码编写动态结果 python代码前言数值算法是跟数学关系比较密切的一门课程,主要是用计算机程序实现一些数学 ...

python蜂窝状六边形_CSS-蜂窝状展示区域（多个六边形）的一种实现方式

python蜂窝状六边形_CSS-蜂窝状展示区域（多个六边形）的一种实现方式相关推荐

最新文章

热门文章