C语言六边形蜂巢数组,CSS 实现蜂巢/六边形图集

不知道为什么，UI 很喜欢设计蜂巢效果(摊手)

一、实现六边形

首先用传统的方式来分析一下六边形

可以拆分成三个矩形，每个矩形旋转正负 60°得到其它两个矩形

由此可以设计出基本的 HTML 结构

矩形的宽高先随便设置，后面组件化的时候再计算其关系，通过 props 设置

然后设置 CSS 样式

.w-comb {

background-color: #e4e4e4;

display: inline-block;

position: relative;

}

.w-comb-sub1,

.w-comb-sub2 {

background-color: #e4e4e4;

position: absolute;

width: inherit;

height: inherit;

}

.w-comb-sub1 {

transform: rotate(-60deg);

}

.w-comb-sub2 {

transform: rotate(60deg);

}

一个六边形就完成了

不过这只是传统的方式，如果不考虑兼容性问题，可以直接使用 clip-path 画一个六边形

.w-comb {

clip-path: polygon(

0 25%,

50% 0,

100% 25%,

100% 75%,

50% 100%,

0 75%

);

}

非常简单粗暴！不需要子节点不需要旋转，只要一行代码，六边形带回家！

二、设置尺寸

实际的应用场景通常都是一堆六边形拼在一起，所以需要将单个六边形处理为组件

首先的问题就是，如何设置六边形的尺寸，这需要用一下初中学到的数学知识

经过计算，当矩形的长为 x 的时候，宽(边长 a )为

对角线 b 为

然后就能规定六边形的尺寸

如果是三个矩形旋转而成的传统方案：

// 传统方案const RADICAL_3 = 1.7320508;

const Comb = (props) => {

const { className } = props;

const width = props.size || 80;

const height = Math.ceil(width / RADICAL_3);

return (

width,

height,

}}>

)

}

如果是直接使用 clip-path 绘制的六边形：

// clip-path

const RADICAL_3 = 1.7320508;

const Comb = (props) => {

const { className } = props;

const width = props.size || 80;

const height = 2 * Math.ceil(width / RADICAL_3);

return (

width,

height,

}}>

)

}

三、排列蜂巢

定义一个 spacing 字段，用来设置 margin-right，然后排列出一排六边形

再生成第二排的时候，需要调整一下 top 和 left

left 为矩形长 ( x ) 的一半(这是基础偏移量，实际需要的距离在这个数字上增加)

而 top 则为六边形边长 ( a ) 的一半的一半(基础偏移量)

后面每一行的 top 都会增加，而 left 仅在偶数行生效

四、添加内容

在传统方案中，是以横向的矩形为基础，所以六边形的内容可以直接写在矩形里

C语言六边形蜂巢数组,CSS 实现蜂巢/六边形图集相关推荐

html中怎么写正六边形,如何用css画正六边形？用css画正六边形的两种方法（代码实例）...
本章给大家介绍如何用css画正六边形?用css画正六边形的两种方法(代码实例).有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在之前要先了解一下正六边形内角和边的关系,正六边形的每个 ...
css给六边形加边框,css写的六边形怎么加边框阴影
怎么给上下两个三角形加上边框阴影? .hexagon{ position: relative; display:inline-block; margin-right: 20px; width: 200 ...
css六边形插入图片蜂巢幻灯代码,CSS 实现蜂巢/六边形图集
CSS 实现蜂巢/六边形图集不知道为什么,UI 很喜欢设计蜂巢效果(摊手) 一.实现六边形首先用传统的方式来分析一下六边形可以拆分成三个矩形,每个矩形旋转正负 60°得到其它两个矩形由此可以设 ...
c语言二维数组对角线输出字符,输出二维数组对角线上的数 c语言二维数组对角线相加...
1．编写程序,把下面的数据输入到一个二维数组中: 25 36 78 13 12 26 8我自己编的,用VISUAL C++6.0 测试过了 #include"stdio.h" vo ...
c语言中字符串数组的地址存放以及%s输出单个字符导致程序崩溃的问题
代码总结下c语言中字符串数组的地址存放问题 #include <iostream> using namespace std; #include<bits/stdc++.h>i ...
c语言程序设计歌手大奖赛,C语言二维数组怎么做：设计青年歌手参加歌曲大奖赛计分系统：共...,怎样用c语言程序设计？青年歌手参加歌曲大奖赛,有10个评委...
导航:网站首页 > C语言二维数组怎么做:设计青年歌手参加歌曲大奖赛计分系统: 共...,怎样用c语言程序设计? 青年歌手参加歌曲大奖赛,有10个评委 C语言二维数组怎么做:设计青年歌手参加歌曲 ...
c++把数组所有元素剔除_C语言基础之数组，第一节，C语言必学知识点剖析
本文约1600字,主要讲了C语言基础之数组.数组又可分为数值数组.字符数组.指针数组.结构数组等各种类别.本文主要讲了数组的基础概念,一维数组的定义和引用. 带你进入C语言的世界,入门C语言,后边将持 ...
C语言在一个有序数组里插入一个元素，使其成为一个新的有序数组
C语言在一个有序数组里插入一个元素,使其成为一个新的有序数组 #include<stdio.h> int main(){int a[11] = { 1,5,8,9,25,26,31,35, ...
C语言求3x3数组对角线元素之和
C语言求3x3数组对角线元素之和 #include <stdio.h> int main() {int i, j,sum=0;int a[3][3];for (i = 0; i < ...
C语言用char数组存储一串整数时的一个陷阱
C语言用char数组存储一串整数时的一个小陷阱 C语言的一个关于char数组的小Tip 一.问题起源二.问题代码三.问题分析 (一).运行分析 (二).可能的解决方案四.问题总结(不想看长篇大论 ...

C语言六边形蜂巢数组,CSS 实现蜂巢/六边形图集

C语言六边形蜂巢数组,CSS 实现蜂巢/六边形图集相关推荐

最新文章

热门文章