CSS 完成蜂巢/6边形图集的示例编码

日期：2021-01-20 类型：科技新闻 

关键词：小程序 活动，微信小程序demo，微信小程序游戏开发价格，手机小程序怎么做，视频播放微信小程序

不知道道为何，UI 很喜爱设计方案蜂巢实际效果（摊手） 

1、完成6边形

最先用传统式的方法来剖析1下6边形

能够拆分为3个矩形框，每一个矩形框 转动正负 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(⑹0deg);
} .w-comb-sub2 { transform: rotate(60deg);
}

1个6边形就进行了

但是这只是传统式的方法，假如不考虑到适配性难题 ，能够立即应用  clip-path 画1个6边形

.w-comb { clip-path: polygon( 0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75% );
}

十分简易粗鲁！不必须子连接点不必须转动，要是1行编码，6边形带回家了！

2、设定规格

具体的运用情景一般全是1堆6边形拼在1起，因此必须将单独6边形解决为组件

最先的难题便是，怎样设定6边形的规格，这必须用1下中学学到的数学课专业知识

历经测算，当矩形框的长为 x 的情况下，宽（边长 a ）为

对角线 b 为

随后就可以要求6边形的规格

假如是 3个矩形框转动而成的 传统式计划方案： 

// 传统式计划方案
const RADICAL_3 = 1.7320508; const Comb = (props) => { const { className } = props; const width = props.size || 80; const height = Math.ceil(width / RADICAL_3); return ( <div className={`w-comb ${className}`} style={{ width, height, }}>
      <div className={'w-comb-sub1'}></div>
      <div className={'w-comb-sub2'}></div>
    </div> ) }

假如是立即 应用 clip-path 绘图 的6边形：

// 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 ( <div className={`w-comb-test ${className}`} style={{ width, height, }}></div>) 
			 }

3、排序蜂巢

界定1个 spacing 字段，用来设定 margin-right，随后排序出1排6边形

再造成第2排的情况下，必须调剂1下 top 和 left

left 为矩形框长 ( x ) 的1半（这是基本偏位量，具体必须的间距在这个数据上提升）

而 top 则为6边形边长 ( a ) 的1半的1半（基本偏位量）

后边每行的 top 都会提升，而 left 仅在偶数行起效

4、加上內容

在传统式计划方案中，是以横向的矩形框为基本，因此6边形的內容能够立即写在矩形框里

到此这篇有关CSS 完成蜂巢/6边形图集的示例编码的文章内容就详细介绍到这了,更多有关CSS6边形图集內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容，期待大伙儿之后多多适用脚本制作之家！

上一篇：css纪录文字标志对齐的几种处理计划方案 返回下一篇：没有了